javascript - 如何删除表行到其他行的末尾

我试图将多个数据提取到表中，但是有一行正在被复制的是totalColumn，当​​我删除重复项时，其余的驻留在表的前面。我要我将行的开头移到表格的末尾

<table>
  <tbody>
    ...
    <tr class="totalColumn">
      <td>Total</td>
      <td></td>
      <td></td>
      <td class="sumofamount">@FuelHistory.sumOfTwo(d.driver.Id) Litres</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

用于删除行的Javascript：

$('.totalColumn').each(function() {
    var thisId = $(this).find('.sumofamount').text();
    var $rowsToGroup = $(this).nextAll('tr').filter(function() {
      return $(this).find('.sumofamount').text() === thisId;
    });

    $rowsToGroup.each(function() {
      $(this).remove();
    }
);

最佳答案

看来您有重复的行，只想保留一行，然后将其移到表的末尾。以下内容删除了除totalColumn行之一以外的所有行，然后将其余的行移到包含表部分的末尾：

function fixTable(){
  // Get the total column rows
  var totalRows = document.querySelectorAll('.totalColumn');
  // Remove all but the first one
  for (var i=1, iLen=totalRows.length; i<iLen; i++) {
    totalRows[i].parentNode.removeChild(totalRows[i]);
  }
  //  Move first to end of containing table section
  totalRows[0].parentNode.appendChild(totalRows[0]);
}

<table>
  <tbody>
    <tr><td>foo<td>
    <tr><td>bar<td>
    <tr class="totalColumn"><td>Total</td><td>1,000</td></tr>
    <tr><td><td>
    <tr class="totalColumn"><td>Total</td><td>1,000</td></tr>
    <tr><td>fee<td>
    <tr><td>fumm<td>
  </tbody>
</table>
<button onclick="fixTable()">Fix table</button>

您也可以使用forEach进行相同的操作，但是以上内容与回溯至IE 8的所有浏览器都兼容，而无需polyfills或transpiling。

fixTable函数可以编写为：

function fixTable(){
  [].forEach.call(document.querySelectorAll('.totalColumn'),
    (row, i) => row.parentNode[(i? 'remove' : 'append') + 'Child'](row)
  );
}

但是我认为for循环更容易阅读，并且与旧版浏览器更加兼容（并且可能更快地启动）。

关于javascript - 如何删除表行到其他行的末尾，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45166207/