如何合并多个重复的行，并使用jquery在html表中求和 [英] how to combine morethan 2 duplicate rows and sum the value in html table using jquery
问题描述
我使用 html表格进行研究。我想结合多个2 重复行并在重复行中求和。
我的表格示例：
名称 金额
john 200
john 300
john 100
harish 400
harish 400
预期结果：
名称 金额
john 600
harish 800
我试着用下面的jquery代码，但它只有mergin两个重复行，如果两个以上重复行发生它不合并，但它增加了值并显示重复。
HTML代码：
<表>
< tr>
< td>名称< / td>
< td>数量< / td>
< td>已过期< / td>
< / tr>
< tr class =row>
< td class =id> A< / td>
< td class =val> 25< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> A< / td>
< td class =val> 25< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> A< / td>
< td class =val> 25< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> A< / td>
< td class =val> 25< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> B< / td>
< td class =val> 100< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> C< / td>
< td class =val> 35< / td>
< td class =date>日期< / td>
< / tr>
< tr class =row>
< td class =id> C< / td>
< td class =val> 35< / td>
< td class =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 （i = 0; i
$（first_row）.find（'。val'）.css（'background-color'，'silver'）; （'。row'）。find（'。val'）。remove（）;
$（first_row）.next（'。row'）。find（' 。'）。remove（）;
$（first_row）.next（'。row'）。find（'。id'）。remove（）;
$ b first_row = $（curRow）;
rowSum = 0;
rowCount = 0;
}
rowSum + = parseInt（$（curRow ）.find（'。val'）.text（））;
rowCount + = 1;
}）; （rowCount> 1）{
$（first_row）.find（'。val'）。text（rowSum）;
if
$（first_row）.find（'。val'）.css（'background-color'，'silver'）; $（i = 0; i
$（first_row）.next（'。row'）。find（'。date'）。remove（）;
$（first_row）.next（'。row'）。find（'。id'）。remove（）;
结果：
名称 数量 过期
b$ b
A 100 日期
A 25 日期
A 25 日期
B 100 日期
C 70 日期
这里我要在名称列中所有记录都应该是 distinct 和要加和的数量。 / p>
请帮我解决这个问题
解决方案使用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'）。文本（sumVal）;
}）;
I'm stuct with html table. I want to combine morethan 2 duplicate rows and sum the values in the duplicate rows.
My table table Example:
Name Amount
john 200
john 300
john 100
harish 400
harish 400
Expected Result:
Name Amount
john 600
harish 800
I tried with below jquery code but it's only mergin two duplicate rows, if more than two duplicate row occures it's not merging but it's adding value and displaying duplicate row.
Html Code:
<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 Code:
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();
}
}
Result:
Name quantity expired
A 100 date
A 25 date
A 25 date
B 100 date
C 70 date
Here I want in Name column All records should be distinct and quantity to be summed.
Please help me with this
Another approach using jQuery .nextAll() and .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);
});
这篇关于如何合并多个重复的行，并使用jquery在html表中求和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
