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

Question

我有一个 table 这样的：

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

如您所见，我有一个 class 等于 TableMenu 的 td。我想将 td 放在上面 class shouldbeunderTableMenu.

以便第一个 td 垂直定位在第二个 td 下方。图片澄清：

但是我该怎么做呢？

Answer 1

与jQuery:

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

或者更一般地说：

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

Answer 2

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

我会这样做：

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

Answer 4

当你可以使用 css 时，为什么要使用所有花哨的 jQuery :P

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

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

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

Second td above first td + html table

javascript

css

jquery

html-table