我有一个类似于这个简化示例的HTML表格:
<table>
<tbody>
<tr><th>Player</th><th>Score</th></tr>
<tr><td>Jack</td><td>7</td></tr>
<tr><td class="parent">Green Team</td><td></td></tr>
<tr><td class="child">Mark</td><td>11</td></tr>
<tr><td class="child">Tom</td><td>5</td></tr>
<tr><td>Steven</td><td>8</td></tr>
<tr><td>Greg</td><td>4</td></tr>
<tr><td class="parent">Blue Team</td><td></td></tr>
<tr><td class="child">Joe</td><td>10</td></tr>
<tr><td class="child">Jill</td><td>12</td></tr>
<tr><td class="child">Rachel</td><td>9</td></tr>
</tbody>
</table>
我正在尝试编写必要的jQuery来迭代父级的所有子行,对得分求和,并将总和插入到父级的得分单元格中。应跳过/忽略与父项无关的行。
执行jQuery代码后,上面的表应转换为:
<table>
<tbody>
<tr><th>Player</th><th>Score</th></tr>
<tr><td>Jack</td><td>7</td></tr>
<tr><td class="parent">Green Team</td><td>16</td></tr>
<tr><td class="child">Mark</td><td>11</td></tr>
<tr><td class="child">Tom</td><td>5</td></tr>
<tr><td>Steven</td><td>8</td></tr>
<tr><td>Greg</td><td>4</td></tr>
<tr><td class="parent">Blue Team</td><td>31</td></tr>
<tr><td class="child">Joe</td><td>10</td></tr>
<tr><td class="child">Jill</td><td>12</td></tr>
<tr><td class="child">Rachel</td><td>9</td></tr>
</tbody>
</table>
我不确定解决这个问题的最佳方法。有什么想法吗?
答案 0 :(得分:2)
您可以这样做:
$("tr:has(td.parent)").each(function() {
var sum = 0;
$(this).nextUntil(':not(:has(td.child))').children(':nth-child(2)').each(function() {
sum += parseInt(this.innerHTML, 10);
});
$(this).children(':eq(1)').text(sum);
});
You can give it a try here,这会使包含<tr>
的每个<td class="parent">
与.nextUntil()
一起使用,直到找到没有<td class="child">
的行。对于那些行,它循环遍历第二个单元格(:nth-child(2)
)并将值添加到总和。