他の行の末尾にテーブルの行を削除する方法

Question

テーブルに複数のデータをフェッチしようとしていますが、重複している行がtotalColumnです。重複を削除すると残りがテーブルの前にあります。 Javascriptが行を削除するために使用

<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> 

私はテーブルの最後に行の前を移動したいもの：

$('.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(); 
    } 
); 

Answer 1

あなたの行を複製して1つのみを維持したいしているようですそれをテーブルの最後に移動します。以下は、その後、totalColumn行の1つが、すべてを削除含むテーブルセクションの最後に残りの1つを動かす：あなたがまたやってをのforEachを使用することができ

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>

同じことですが、上記はIE8のすべてのブラウザと互換性があり、ポリフィルや透明化はありません。

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

をしかし、私はためのループは読みやすく、非常にはるかに互換性のある古いブラウザである（そしておそらくより速く起動することです）と思う：

fixTable機能を書くことができます。