第二个td高于第一个td + html表

Question

我有一张这样的表：

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

正如你所看到的，我有一个类等于TableMenu的td。我想将td 置于上面，使用类shouldbeunderTableMenu定位。

这样第一个td垂直位于第二个td之下。图片澄清：

但我怎么能这样做？

Answer 1

尝试使用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>

或使用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

使用jQuery：

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

或更一般地说：

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

Answer 3

为什么在使用css时可以使用所有那些花哨的jQuery：P

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);
});