表行插入错误的位置

Question

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

这是功能：

 $(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)

Answer 1

如果您希望小组位于小组顶部，请使用.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(); }); });值表示每个组中的行数。这可用于查找组中每列的子总和：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

try:
    # ...
except KeyboardInterrupt:
    sys.exit(1)
except Exception:  # I would use a more specific exception here if you can.
    data = (item['id'])
    db.delete('...')

＆＃13;

＆＃13;

＆＃13;