jQuery - Problem beim Einfügen neuer Zeile in HTML-Tabelle

Question

Ich habe ein seltsames Problem, das ich nicht herausfinden kann, wenn ich eine neue Zeile mit jQuery einfügen. Ich bin in der Lage, eine neue Zeile einzufügen, aber die vorherige Zeile, die nach Elternteil war, geht im Grunde rechts davon über, anstatt darunter zu gehen. Auf jeden Fall hier ist mein Code: jQuery

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

hier wird die HTML-Tabelle Code nach der Ausführung der jQuery-Funktion:

<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

Sie sollten eine Zeile nach dem übergeordneten Parent anfügen. So sollte der Code sein:

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

Sie hat vier Spalten in einigen Zeilen, drei in anderen. Dies ist inkonsistent. Fügen Sie entweder leere td Tags in den Zeilen mit drei Spalten hinzu oder verwenden Sie das Attribut colspan="2".

Answer 3

Dies ist eine mögliche Lösung OHNE JQUERY, nur 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>