第一个td + html表上方的第二个td

Question

我有一张这样的桌子：

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

如您所见，我有一个td，其类等于TableMenu 。 我想通过类shouldbeunderTableMenu将td shouldbeunderTableMenu在td 上方 。

使第一个td垂直位于第二个td之下。 图片说明：

但是我该怎么办呢？

Answer 1

尝试使用之前 ，

$(".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> 

或之后使用

$(".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

使用jQuery：

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

或更笼统地说：

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

Answer 3

当可以使用css：P时，为什么要使用所有这些漂亮的jQuery？

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

工作示例： http : //jsfiddle.net/h0pLe8cw/1/

Answer 4

我会这样做：

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