javascript - 在 JavaScript 中重新排列表格

Question

我想使用 JavaScript 对表格行重新排序。

例如采用以下虚拟表:

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
  </tr>
</table>

我想在不使用 jQuery 的情况下在 JavaScript 中执行此操作。我想将 A1、B1、C1、D1.. 行显示为第一行，然后是 1、2、3、4 行，然后是 A、B、C、D 行。

我知道在客户端会有一些等待时间，但我需要在客户端进行。对于任意数量的行，是否有一些通用的解决方案可以做到这一点？

Answer 1

如果我没理解错的话，你是在问如何把最后一行变成第一行，把剩下的往下推。应该这样做:

<table id="mytable">
...
</table>

<script type="text/javascript">
    var tbl = document.getElementById('mytable');
    var rows = tbl.getElementsByTagName('tr');
    var firstRow = rows[0];
    var lastRow = rows[rows.length];
    firstRow.parentNode.insertBefore(lastRow.parentNode.removeChild(lastRow), firstRow);
</script>

假设您的表没有嵌套表。在这一点上，这需要更聪明一些。这还假设您没有使用 TBODY 和 THEAD 节点。但我相信您可以从那里得到想法并加以改进。