tbody中的汇总表分别用于多个表

Question

我有多个表，我想在其中对tbody下的所有td求和，并在thead中输出值。我还有多个表，因为我使用可排序的jquery函数在表之间移动td行，如果拖放时总数更新，那就太好了。

这些值是字符串格式的，但如果这样更容易的话，我可能会用这个值创建一个数据对象。我使用的是jquery，但纯javascript也可以。

该表应如下所示(粗体数字是应计算的数字(：

<table>
<thead>
<tr>
<td>Main object A</td>
<td><b>120000</b></td>
<td><b>45000</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>100 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Main object B</td>
<td><b>220000</b></td>
<td><b>35000</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>200 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>

Answer 1

我不完全理解你需要什么，但应该是这样的。如果你点亮我，我可以帮你得到你想要的

$("table").each(function(index, el) {
var sum = 0;
$(el).find("tbody > tr > td:nth-child(2)").each(function(i, e) {
sum += parseInt($(e).html().replace(" ", ""));
});
$(el).find("thead > tr > td").eq(1).html(sum);
var sum1 = 0;
$(el).find("tbody > tr > td:nth-child(3)").each(function(i, e) {
sum1 += parseInt($(e).html().replace(" ", ""));
});
$(el).find("thead > tr > td").eq(2).html(sum1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Main object A</td>
<td>[Sum of below tbody fields A]</td>
<td>[Sum of below tbody fields B]</td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>100 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Main object B</td>
<td>[Sum of below tbody fields A]</td>
<td>[Sum of below tbody fields B]</td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>100 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>

Answer 2

您可以使用这样的东西。基本上，代码会找到要求和的元素，然后将其附加到Object总面积中。代码将数字"对象"行相加，然后将A的总和放在左上角，将B的总数放在右上角：

let tables = $("table").toArray(); // Get all the tables
let a = false;
for(table of tables) { // Loop through each table
let tableRow = $(table).find('tbody').find('tr').toArray(); // Get the tr data for each object
let total = 0;
for(tableData of tableRow) {
for(data of $(tableData).children().toArray()) {
let number = $(data).html().replace(' ', '');
if(!isNaN(number)) { // If the string is considered a number then add it
total += parseInt(number);
}
}
let totalElements = $(table).find('thead').find('td').toArray();
$(totalElements[a + 1]).html(total);
a = !a;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>Main object A</td>
<td>[Sum of below tbody fields A]</td>
<td>[Sum of below tbody fields B]</td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>100 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>Main object B</td>
<td>[Sum of below tbody fields A]</td>
<td>[Sum of below tbody fields B]</td>
</tr>
</thead>
<tbody>
<tr>
<td>Object A</td>
<td>100 000</td>
<td>20 000</td>
</tr>
<tr>
<td>Object B</td>
<td>10 000</td>
<td>25 000</td>
</tr>
</tbody>
</table>