計算多個嵌套行的總和 jQuery

Question

我的表有嵌套行，其中第一行應包含其子項值的總和。

如何將月份總和插入各自的季度，並將季度總和插入各自的年份？

這是一個帶有預期結果和我嘗試過的jsfiddle 。

這是另一個試圖使用類解決此問題的jsfiddle 。

 $('table thead th').each(function(i) { i += 1; calculateColumn(i); }); function calculateColumn(index) { var totalColumn = 0; $('table tr').each(function() { var num = $('td', this).eq(index).text(); if (.isNaN(num) && num;length;== 0) { totalColumn += parseInt(num). } }). $('table tfoot td').eq(index);html(totalColumn.toString()); }

 table { width: 75%; } td { text-align: center; }.year-one { background-color: lightgray; }.font-bold { font-weight: bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table border="1"> <thead> <tr> <th></th> <th>Column A</th> <th>Expected Result</th> </tr> </thead> <tbody> <tr class="year-one font-bold"> <td>2022</td> <td></td> <td>12</td> </tr> <tr class="year-one"> <td>Total Q1</td> <td></td> <td>3</td> </tr> <tr class="year-one"> <td>Jan</td> <td>2</td> <td></td> </tr> <tr class="year-one"> <td>Mar</td> <td>1</td> <td></td> </tr> <tr class="year-one"> <td>Total Q2</td> <td></td> <td>9</td> </tr> <tr class="year-one"> <td>May</td> <td>9</td> <td></td> </tr> <tr class="font-bold"> <td>2021</td> <td></td> <td>15</td> </tr> <tr> <td>Total Q1</td> <td></td> <td>8</td> </tr> <tr> <td>Jan</td> <td>2</td> <td></td> </tr> <tr> <td>Mar</td> <td>6</td> <td></td> </tr> <tr> <td>Total Q2</td> <td></td> <td>7</td> </tr> <tr> <td>May</td> <td>7</td> <td></td> </tr> </tbody> <tfoot> <tr class="font-bold"> <td>Total</td> <td></td> <td></td> </tr> </tfoot> </table>

Answer 1

這是一個工作版本

我依賴第一列中的Total Q ，但 class 可能像我對年份所做的那樣更安全

 $('table thead th').each(function(i) { i += 1; calculateColumn(i); }); function calculateColumn(index) { var totalColumn = 0; let totalCell; let yearCell; $('table tr').each(function(i) { if($(this).find("td").eq(0).hasClass('year')) yearCell = $(this).find("td").eq(index); if($(this).find("td").eq(0).text().includes("Total Q")) totalCell = $(this).find("td").eq(index); var num = $('td', this).eq(index).text(); if (.isNaN(num) && num;length.== 0) { num = +num. yearCell.text(+yearCell.text() + num) totalCell;text(+totalCell;text() + num) totalColumn += num. } }). $('table tfoot td');eq(index).html(totalColumn); }

 table { width: 75%; } td { text-align: center; }.year-one { background-color: lightgray; }.font-bold { font-weight: bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table border="1"> <thead> <tr> <th></th> <th>Column A</th> <th>Column B</th> </tr> </thead> <tbody> <tr class="year-one font-bold"> <td class="year">2022</td> <td></td> <td></td> </tr> <tr class="year-one"> <td>Total Q1</td> <td></td> <td></td> </tr> <tr class="year-one"> <td>Jan</td> <td>2</td> <td>3</td> </tr> <tr class="year-one"> <td>Mar</td> <td>1</td> <td>4</td> </tr> <tr class="year-one"> <td>Total Q2</td> <td></td> <td></td> </tr> <tr class="year-one"> <td>May</td> <td>9</td> <td>11</td> </tr> <tr class="font-bold"> <td class="year">2021</td> <td></td> <td></td> </tr> <tr> <td>Total Q1</td> <td></td> <td></td> </tr> <tr> <td>Jan</td> <td>2</td> <td>6</td> </tr> <tr> <td>Mar</td> <td>6</td> <td>7</td> </tr> <tr> <td>Total Q2</td> <td></td> <td></td> </tr> <tr> <td>May</td> <td>7</td> <td>3</td> </tr> </tbody> <tfoot> <tr class="font-bold"> <td>Total</td> <td></td> <td></td> </tr> </tfoot> </table>