Second td above first td + html table

Question

I have a table like this:

<table>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr class="TableContent">
            <td class="shouldbeunderTableMenu"></td>
            <td class="TableMenu"></td>
        </tr>
    </tbody>
</table>

As you can see I have a td with class equal to TableMenu . I would like to position the td above the td with class shouldbeunderTableMenu .

So that the first td is vertically positioned under the second td. Image to clarify:

But how can I do this?

Answer 1

Try to use before ,

$(".shouldbeunderTableMenu").before($(".TableMenu"));

 $(".shouldbeunderTableMenu").before($(".TableMenu")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr></tr> <tr></tr> <tr class="TableContent"> <td class="shouldbeunderTableMenu">1</td> <td class="TableMenu">2</td> </tr> </tbody> </table> 

or use after

$(".TableMenu").after($(".shouldbeunderTableMenu"));

 $(".TableMenu").after($(".shouldbeunderTableMenu")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr></tr> <tr></tr> <tr class="TableContent"> <td class="shouldbeunderTableMenu">1</td> <td class="TableMenu">2</td> </tr> </tbody> </table> 

Answer 2

With jQuery:

$('td.TableMenu').each(function() { $(this).prependTo($(this).parent()); });

Or more generally:

$('td.TableMenu').each(function() { $(this).before($(this).siblings('.shouldbeunderTableMenu')); });

Answer 3

Why use all that fancy jQuery when you can use css :P

td{
    border:1px solid black;
    display:block;    
}
.TableMenu{
    margin-top:-45px;    
}
.shouldbeunderTableMenu{
    margin-top:25px;
}

Working example: http://jsfiddle.net/h0pLe8cw/1/

Answer 4

I would do this:

$(document).ready(function() {
    var shoulder  =  $(".TableContent .shouldbeunderTableMenu");
    var clone = shoulder.clone();
    shoulder.remove();
    $(".TableContent").append(clone);
});