khemikal khemikal - 6 months ago 12
jQuery Question

jQuery - issue inserting new row in html table

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

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/

Comments