Question

我试图找出是否可以在加载页面时自动调整多个表行的顺序。

我不需要任何拖放功能。它应该在页面加载时自动完成。

我有一个动态生成的表，大约有10行，每行都有自己的类：

<table>
  <tbody>
    <tr class="Reference">
      <th>Reference</th>
      <td>3302</td>
    </tr>
    <tr class="Manufacturer">
      <th>Manufacturer</th>
      <td>Cuttler-Hammer</td>
    </tr>
    <tr class="Model">
      <th>Model</th>
      <td>V48M28E45B45 KVA</td>
    </tr>
    <tr class="Year">
      <th>Year Manufactured</th>
      <td></td>
    </tr>
    <tr class="Tonage">
      <th>Tonage</th>
      <td></td>
    </tr>
    <tr class="Shot">
      <th>Shot Size Oz</th>
      <td></td>
    </tr>
    <tr class="Size">
      <th>Shot Size Grams</th>
      <td></td>
    </tr>
    <tr class="Spacing">
      <th>Tie Bar Spacing</th>
      <td></td>
    </tr>
    <tr class="Platen">
      <th>Platen Size</th>
      <td></td>
    </tr>
  </tbody>
</table>

我需要重新订购表格，第二行是第一行，第三行是第二行，第一行是第三行。

在过去的45分钟里，我一直坐在这里试图弄清楚如何使用jQuery或Javascript来做这件事，但我正在撞墙。

有可能吗？如果是这样，怎么样？

Answer 1

这样的事情怎么样？

为<tbody>添加ID。否则使用CSS选择器（未显示）。

<table>
  <tbody id="table-body">

  </tbody>
</table>

编写一些在window.document.ready()

运行的JavaScript

<script language="javascript">
  $(window.document).ready(function () {
    var tableRows = Array(), 
      i = 0, 
      tempRow = undefined;

    //clone each row node to the local array
    $('#table-body').children().each(function cloneRowsToArray() {
        tableRows.push($(this).clone());
    });

    //re-order the array as necessary
    tempRow = tableRows[0];
    tableRows[0] = tableRows[1];
    tableRows[1] = tempRow;

    //re-write the newly arranged rows.
    $('#table-body').children().each(function replaceEachRowFromArray() {
        $(this).replaceWith(tableRows[i]);
        i += 1;
    });
  });
</script>

Answer 2

我认为你可以在body onload事件上创建一个javascript函数，它使用jquery函数insertBefore()和insertAfter()在其他元素之前或之后移动特定元素。它只是一个想法，而不是一个具体的解决方案，但我希望可以帮助你。

在页面加载时更改表行的顺序

2 个答案: