jQuery - issue inserting new row in html table

Question

I am having an odd issue that I am unable to figure out when I insert a new row using jQuery. I am able to insert a new row, but the previous row that was after parent basically merges to the right of it instead of going underneath it. Anyway here is my code: jQuery

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

here is the html table code after the jQuery function's execution:

<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

This is a possible solution WITHOUT JQUERY, only 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>

Answer 2

You should append a row after the .parent's parent. So the code should be:

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

You have four columns in some rows, three in others. This is inconsistent. Either add empty td tags in the rows with three columns or use colspan="2" attribute.