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

【问题标题】：Second td above first td + html table第一个 td + html 表上方的第二个 td
【发布时间】：2018-07-22 01:17:58
【问题描述】：

我有一张这样的桌子：

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

如您所见，我有一个类等于TableMenu 的 td。我想将 td 高于 td 定位为 shouldbeunderTableMenu 类。

使第一个 td 垂直定位在第二个 td 之下。图片澄清：

但是我该怎么做呢？

【问题讨论】：

为什么要这样做？你不能只使用两个表格行，每个行都有一个单元格吗？或者甚至完全摆脱桌子？
只需在不同的地方切换它们...
html 已经创建，我真的没有机会更改它（客户端的东西）

标签： javascript jquery css html-table

【解决方案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>

【讨论】：

您的代码将不起作用。我想你可能把元素颠倒了。

【解决方案2】：

使用 jQuery：

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

或更笼统地说：

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

【讨论】：

【解决方案3】：

既然可以使用 css，为什么还要使用所有花哨的 jQuery :P

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

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

【讨论】：

【解决方案4】：

我会这样做：

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

【讨论】：

不必要地使用克隆
@Alex 你能解释一下为什么我不需要克隆吗？谢谢
你能解释一下你为什么需要它吗？问题是如何移动，而不是复制/复制元素
但它不会产生相同的结果吗？我只是想知道为什么这种方式效率低。
因为您正在创建另一个元素并删除原始元素。当您想将汽车从 a 移动到 b 时，您是开车去那里还是买一辆新的并毁掉第一辆？ :)