javascript - 如何使用jquery合并2个以上的重复行并对html表中的值求和

Question

我对 html 表格很困惑。我想要合并 2 个以上的重复行并对重复行中的值求和。

我的表格示例:

名称   金额
约翰         200
约翰         300
约翰         100
哈里什      400
哈里什      400

预期结果:

名称   金额
约翰         600
哈里什      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();
    }
}

结果:

名称  数量  已过期

A         100       日期
A          25        日期
A          25        日期
B         100       日期
C          70        日期

在这里，我希望在“名称”列中的所有记录都应该不同并且数量要求和。

请帮我解决这个问题

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);
});