Question

我想将某些行推到表的底部，如何在纯JavaScript中实现？

在下表中，我想将第1行和第2行推到底部：

<table>
    <tr><td>ABCD</td></tr>
    <tr><td>XYZ</td></tr>
    <tr><td>adfs</td></tr>
    <tr><td>asd</td></tr>
    <tr><td>asdasd</td></tr>
</table>

Answer 1

做这样的事情：

假设你有这样的表：

<table id='table'>
    <tr id='row1><td>....</td></tr>
    <tr id='row2><td>....</td></tr>
    <tr id='row3><td>....</td></tr>
    <tr id='row4><td>....</td></tr>
</table>

一个包含新订单的数组：

NewOrder[1] = 3;
NewOrder[2] = 4;
NewOrder[3] = 2;

然后，做一些像这样的事情（没有经过测试，所以你可能需要调整代码，但这是个主意）：

for ( i=1; i<=NewOrder.length; i++ ) {
    $('row'+i).appendTo( '#table' );
}

这样，它们按顺序移动到表的末尾。

所以你将有3个移动到最后，然后4个移到它后面，然后2个移到它后面等等。在他们将ALL全部附加到表的末尾之后，第一个将成为第一行，其余的将在它背后的正确顺序。

使表格样式='display：none;'然后执行$（'＃table'）。show（）;在启动时。

再次编辑：你可以围绕整个身体内容做一个div，比如

<body>
<div id='everything' style='display:none;'>
....
</div>
</body>

这样整个页面将被隐藏（只是空白），只需加载和订购表所需的一小部分。

然后你会使用：

$(function(){
    $('#everything').show();
}

在DOM准备就绪后立即显示整个页面。加载页面需要花费不到一秒的时间，但它会一次加载，所以不会有任何闪存丢失的表等等。只要一切都在#everything中，它只会看起来喜欢加载的页面 - 对观众应该是透明的。

Answer 2

将表体的第一个子项追加到表体。两次。

tablebodyreference.appendChild(tablebodyreference.firstChild);
tablebodyreference.appendChild(tablebodyreference.firstChild);

tablebody元素只能将trs作为子元素。

如何将顶级表行拖到底部 - HTML和JavaScript

2 个答案: