jQuery - htmlテーブルに新しい行を挿入するときに問題が発生する

Question

jQueryを使用して新しい行を挿入するとわからないという奇妙な問題が発生しています。私は新しい行を挿入することができますが、親の後にあった前の行は基本的にその行の下に行くのではなく、その行の右側にマージします。とにかく、ここに私のコードです：ここではjQueryの

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

は、HTMLテーブルコードは、jQueryの関数の実行後です：

<table class="table-style" id="tbl1"> 
    <tbody> 
     <tr> 
      <th>column1</th> 
      <th>column2</th> 
      <th>column3</th> 
      <th>column4</th> 
     </tr> 
     <tr> 
      <td class="parent" rowspan="14">TEST1</td> 
      <td>Sub Total</td> 
      <td class="sub0"></td> 
      <td class="sub1"></td> 
     <tr> 
     </tr> 
      <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> Grand Total:</td> 
      <td></td> 
      <td id="grandtotal">1715284066</td> 
      <td id="grandtotal1">1822116442</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

.parentの親の後に行を追加する必要があります。 ので、コードは次のようになります。

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

https://jsfiddle.net/ducfilan/9z6mbx8t/

Answer 2

あなたは、いくつかの行の4つのカラム、他の人では3を持っています。これは矛盾しています。空のtdタグを3列の行に追加するか、colspan="2"属性を使用してください。

Answer 3

これは、jQueryの、唯一のNavite Javascriptをせずに可能なソリューションです。

var a = document.querySelector("table tbody"); 
 
var t = a.children.length; 
 
var i = t-1; 
 
a.insertRow(i); 
 
a.children[i].innerHTML = "<td>Sub Total</td><td class=sub0>aaaa</td><td class=sub1>bbb</td><td>cccc</td>"; 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table-style" id="tbl1"> 
 
<thead> 
 
<tr><th>column1</th><th>column2</th><th>column3</th><th>column4</th></tr> 
 
</thead> 
 
<tbody> 
 
<tr><td class="parent" rowspan="15">TEST1</td><td>Sub Total</td><td class="sub0"></td><td class="sub1"></td></tr><tr><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> Grand Total:</td><td></td><td id="grandtotal">1715284066</td><td id="grandtotal1">1822116442</td></tr> 
 

 
</tbody></table>