テーブルの行が間違った位置に挿入されました

Question

私はすべての親の上部に小計の行を挿入するはずの関数を持つ財務テーブルを持っています。しかし、実際に最初のものではなく、2番目の行に挿入するので、私は間違ったことをしています。ここで

は関数である。ここでは

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

は私のhtmlとすべてを持って、私のJSFiddleリンクです：

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>を選択します。

小計の計算方法は、それぞれ<td class="parent">のrowspan属性を使用する戦略です。 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>