如何使用jQuery组合Morethan 2重复行并在HTML表中总和值

Question

我用 html table stuct。我想组合Morethan 2 duplicate rows并在重复行中总结值。

我的表格表示例：

名称＆nbsp;金额
John＆nbsp;＆nbsp;＆nbsp;200
John＆nbsp;＆nbsp;＆nbsp;300
John＆nbsp;＆nbsp;＆nbsp;100
Harish＆nbsp;＆nbsp;＆nbsp;＆nbsp;400
Harish＆nbsp;＆nbsp;＆nbsp;＆nbsp;400

预期结果：

名称＆nbsp;金额
John＆nbsp;＆nbsp;＆nbsp;600
Harish＆nbsp;＆nbsp;＆nbsp;＆nbsp;800

我尝试了以下jQuery代码，但这只是梅尔金两个重复行，如果发生了两个以上的重复行，它不是合并，而是添加值并显示重复行。

html代码：

<table>
    <tr>
        <td>Name</td>
        <td>quantity</td>
        <td>expired</td>
    </tr>
    <tr class="row">
        <td class="id">A</td>
        <td class="val">25</td>
        <td class="date">date</td>
    </tr>
    <tr class="row">
        <td class="id">A</td>
        <td class="val">25</td>
        <td class="date">date</td>
    </tr>
     <tr class="row">
        <td class="id">A</td>
        <td class="val">25</td>
        <td class="date">date</td>
    </tr>
     <tr class="row">
        <td class="id">A</td>
        <td class="val">25</td>
        <td class="date">date</td>
    </tr>
    <tr class="row">
        <td class="id">B</td>
        <td class="val">100</td>
        <td class="date">date</td>
    </tr>
    <tr class="row">
        <td class="id">C</td>
        <td class="val">35</td>
        <td class="date">date</td>
    </tr>
    <tr class="row">
        <td class="id">C</td>
        <td class="val">35</td>
        <td class="date">date</td>
    </tr>
</table>

jQuery代码：

var first_row = '<tr class="row"><td class="id">NULL</td></tr>';
var rowCount = 0;
var rowSum = 0;
$.each($('.row'), function (index, curRow) {
    if ($(first_row).find('.id').text() != $(curRow).find('.id').text()) {
       if (rowCount > 1) {
            $(first_row).find('.val').text(rowSum);
            $(first_row).find('.val').css('background-color','silver');
            for (i = 0; i < rowCount; i++) {
                $(first_row).next('.row').find('.val').remove();
                $(first_row).next('.row').find('.date').remove();
                $(first_row).next('.row').find('.id').remove();
            }
            }
       first_row = $(curRow);
        rowSum = 0;
        rowCount = 0;
    }
    rowSum += parseInt($(curRow).find('.val').text());
    rowCount += 1;
});
if (rowCount > 1) {
    $(first_row).find('.val').text(rowSum);
    $(first_row).find('.val').css('background-color','silver');
    for (i = 0; i < rowCount; i++) {
        $(first_row).next('.row').find('.val').remove();
        $(first_row).next('.row').find('.date').remove();
        $(first_row).next('.row').find('.id').remove();
    }
}

结果：

名称＆nbsp;＆nbsp; dentity ＆nbsp;＆nbsp; 已过期

a＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;100＆nbsp;＆nbsp;＆nbsp;＆nbsp;日期
a＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;25＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;日期
a＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;25＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;日期
b＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;100＆nbsp;＆nbsp;＆nbsp;＆nbsp;日期
c＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;70＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;日期

在这里，我想要名称列中的所有记录应为 distinct，并且要汇总数量。

请帮助我

Answer 1

使用jquery .nextall（）和.filter（）

的另一种方法

$('.row').each(function() {
  var thisId = $(this).find('.id').text();
  var sumVal = parseFloat($(this).find('.val').text());
  var $rowsToGroup = $(this).nextAll('tr').filter(function() {
    return $(this).find('.id').text() === thisId;
  });
  $rowsToGroup.each(function() {
    sumVal += parseFloat($(this).find('.val').text());
    $(this).remove();
  });
  $(this).find('.val').text(sumVal);
});

Answer 2

尝试以下：

    var json = {};
    //Sum up everything and erase
    $.each($('.row'), function (index, curRow) {                                    
        var curName=$(curRow).find('.id').text();   
        var curQty=$(curRow).find('.val').text();
        if (json[curName] != null){
            json[curName] += parseInt(curQty);
        } else {
            json[curName] = parseInt(curQty);               
        }
        $(this).remove();
    });
    //Rebuild table
    jQuery.each(json, function(name, val) {
        $('table').append('<tr class="row"><td class="id">'+name+'</td><td class="val">'+val+'</td><td class="date">date</td></tr>');
    });