javascript - 表格行插入到错误的位置

标签 javascript jquery

我有一个财务表，其中有一个函数应该在每个父级的顶部插入一个小计行。但是我做错了，因为它实际上插入到父级中的第二行而不是第一行。

这是函数:

 $(document).ready(function() {
    $('.parent').parent().after('<tr class=sub><td>Sub Total</td><td class="sub0"></td><td class="sub1"></td></tr>');
  });

这是我的 JSFiddle 链接，其中包含我的 html 和所有内容:

JSFiddle Link

还有人能指出我获取每个父项中列的小计的正确方向吗？我得到的总计是这样的:

var sum = 0;

$('tr:not(:first):not(:last)').each(function () {
    sum += parseFloat($('td:eq(2)', $(this)).text());
});
$('#grandtotal').html(sum)

var sum1 = 0;

$('tr:not(:first):not(:last)').each(function () {
    sum1 += parseFloat($('td:eq(3)', $(this)).text());
});
$('#grandtotal1').html(sum1)

最佳答案

如果您希望小计位于组的顶部，请使用 .before() 而不是 .after() - $('.parent').parent() 选择组的第一个 <tr>，其中包括第一行数据。

对于计算小计，这里有一个在每个 rowspan 上使用 <td class="parent"> 属性的策略。 rowspan 值表示每组中的行数。这可用于查找组中每列的子和:

$(document).ready(function() {
  $(".parent").each(function(index, element) {
    var subTotal1 = 0;
    var subTotal2 = 0;
    var subTotal3 = 0;
    var numRows = parseInt($(this).attr("rowspan"));
    var firstRow = $(this).parent();
    var currentRow = firstRow;
    for (i = 0; i < numRows; i++) {
      subTotal1 += parseInt($(currentRow.children(".child")[0]).text());
      subTotal2 += parseInt($(currentRow.children(".child")[1]).text());
      subTotal3 += parseInt($(currentRow.children(".child")[2]).text());
      currentRow = currentRow.next("tr");
    }
    firstRow.before('' +
      '<tr>' +
        '<td class="parent" rowspan="' + (numRows + 1) + '">Group ' + (index + 1) + ' - Sub Total</td>' +
        '<td class="sub0">' + subTotal1 + '</td>' +
        '<td class="sub1">' + subTotal2 + '</td>' +
        '<td class="sub2">' + subTotal3 + '</td>' +
      '</tr>');
    $(this).remove();
  });
});
.table-style {
  width: 400px;
  font-size: 12px;
  color: #333;
  border-width: 1px;
  border-style: solid;
  border-color: #c0c0c0;
  border-collapse: collapse
}

.table-style th {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #c0c0c0;
  background-color: #0000FF;
  color: #fff
}

.table-style tr:hover td {
  font-weight: bold
}

.table-style tr:nth-child(odd) td {
  background-color: #ADD8E6
}

.table-style td {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #c0c0c0;
  background-color: #fff
}

.parent {
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="tbl1">
  <tbody>
    <tr>
      <th>Header0</th>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
    </tr>
    <tr>
      <td class="parent" rowspan="14">Group 1</td>
      <td class="child">23</td>
      <td class="child">106040943</td>
      <td class="child">117638617</td>
    </tr>
    <tr>
      <td class="child">24</td>
      <td class="child">20733153</td>
      <td class="child">22164885</td>
    </tr>
    <tr>
      <td class="child">25</td>
      <td class="child">49086765</td>
      <td class="child">53820000</td>
    </tr>
    <tr>
      <td class="child">26</td>
      <td class="child">30627906</td>
      <td class="child">34237662</td>
    </tr>
    <tr>
      <td class="child">27</td>
      <td class="child">5408650</td>
      <td class="child">5671224</td>
    </tr>
    <tr>
      <td class="child">28</td>
      <td class="child">2548936</td>
      <td class="child">2647287</td>
    </tr>
    <tr>
      <td class="child">29</td>
      <td class="child">21911743</td>
      <td class="child">22766661</td>
    </tr>
    <tr>
      <td class="child">30</td>
      <td class="child">15496867</td>
      <td class="child">16387141</td>
    </tr>
    <tr>
      <td class="child">31</td>
      <td class="child">9897902</td>
      <td class="child">9646904</td>
    </tr>
    <tr>
      <td class="child">32</td>
      <td class="child">23750440</td>
      <td class="child">25845771</td>
    </tr>
    <tr>
      <td class="child">33</td>
      <td class="child">25213168</td>
      <td class="child">27009243</td>
    </tr>
    <tr>
      <td class="child">34</td>
      <td class="child">71556982</td>
      <td class="child">79796691</td>
    </tr>
    <tr>
      <td class="child">35</td>
      <td class="child">13464563</td>
      <td class="child">16890000</td>
    </tr>
    <tr>
      <td class="child">36</td>
      <td class="child">9898131</td>
      <td class="child">12360000</td>
    </tr>
    <tr>
      <td class="parent" rowspan="8">Group 2</td>
      <td class="child">21</td>
      <td class="child">13111399</td>
      <td class="child">11818156</td>
    </tr>
    <tr>
      <td class="child">5</td>
      <td class="child">68138406</td>
      <td class="child">64295537</td>
    </tr>
    <tr>
      <td class="child">58</td>
      <td class="child">866778</td>
      <td class="child">1245395</td>
    </tr>
    <tr>
      <td class="child">6</td>
      <td class="child">7969682</td>
      <td class="child">8593771</td>
    </tr>
    <tr>
      <td class="child">72</td>
      <td class="child">127098852</td>
      <td class="child">124284173</td>
    </tr>
    <tr>
      <td class="child">77</td>
      <td class="child">2806</td>
      <td class="child">0</td>
    </tr>
    <tr>
      <td class="child">85</td>
      <td class="child">7350700</td>
      <td class="child">6745754</td>
    </tr>
    <tr>
      <td class="child">87</td>
      <td class="child">96303976</td>
      <td class="child">102006610</td>
    </tr>
    <tr>
      <td class="parent" rowspan="8">Group 3</td>
      <td class="child">10</td>
      <td class="child">120112816</td>
      <td class="child">126211000</td>
    </tr>
    <tr>
      <td class="child">11</td>
      <td class="child">66521923</td>
      <td class="child">78090000</td>
    </tr>
    <tr>
      <td class="child">12</td>
      <td class="child">23696952</td>
      <td class="child">25210000</td>
    </tr>
    <tr>
      <td class="child">16</td>
      <td class="child">126705761</td>
      <td class="child">157886417</td>
    </tr>
    <tr>
      <td class="child">3</td>
      <td class="child">39672907</td>
      <td class="child">39653000</td>
    </tr>
    <tr>
      <td class="child">37</td>
      <td class="child">9345911</td>
      <td class="child">9634900</td>
    </tr>
    <tr>
      <td class="child">56</td>
      <td class="child">48397890</td>
      <td class="child">49597217</td>
    </tr>
    <tr>
      <td class="child">9</td>
      <td class="child">110146281</td>
      <td class="child">120303398</td>
    </tr>
    <tr>
      <td class="parent" rowspan="10">Group 4</td>
      <td class="child">14</td>
      <td class="child">67824541</td>
      <td class="child">70194836</td>
    </tr>
    <tr>
      <td class="child">17</td>
      <td class="child">42945336</td>
      <td class="child">42390000</td>
    </tr>
    <tr>
      <td class="child">18</td>
      <td class="child">354189</td>
      <td class="child">613560</td>
    </tr>
    <tr>
      <td class="child">19</td>
      <td class="child">36109243</td>
      <td class="child">36188467</td>
    </tr>
    <tr>
      <td class="child">20</td>
      <td class="child">26278170</td>
      <td class="child">26230825</td>
    </tr>
    <tr>
      <td class="child">22</td>
      <td class="child">40523406</td>
      <td class="child">40209433</td>
    </tr>
    <tr>
      <td class="child">67</td>
      <td class="child">41648471</td>
      <td class="child">39898784</td>
    </tr>
    <tr>
      <td class="child">7</td>
      <td class="child">103856047</td>
      <td class="child">109500000</td>
    </tr>
    <tr>
      <td class="child">71</td>
      <td class="child">17248238</td>
      <td class="child">15386522</td>
    </tr>
    <tr>
      <td class="child">74</td>
      <td class="child">67417236</td>
      <td class="child">69046601</td>
    </tr>
    <tr>
      <td>Grand Total:</td>
      <td></td>
      <td id="grandtotal">1715284066</td>
      <td id="grandtotal1">1822116442</td>
    </tr>
  </tbody>
</table>

关于javascript - 表格行插入到错误的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37446524/

上一篇：javascript - 删除 URL 中的哈希值 (fullpage.js)

下一篇：javascript - ES6 + SystemJs - 为什么我必须使用 .js 扩展名来导入 es6 模块？

相关文章：

javascript - 动态设置多选选择框的每个选项的属性

javascript - 根据滚动位置触发视频自动播放

jquery - 试图在水平菜单栏上移动

javascript - 具有动态可变高度/宽度的 Angular 虚拟滚动？

javascript - 为什么 Typescript 认为 async/await 返回一个包含在 Promise 中的值？

javascript - 在新窗口中打开链接，如果已经打开则聚焦到它

jquery - 检测水平鼠标滚轮

javascript - jQuery ajax 的问题

jQuery 或选择器？

javascript - 什么时候可以将管道运算符用于条件参数？ - JavaScript

©2024 IT工具网  联系我们