khemikal khemikal - 6 months ago 17
jQuery Question

Table row is inserted in the wrong position

I have a financials table where I have a function that is supposed to insert a subtotal row at the top of every parent. However I am doing something wrong as it actually inserts at the 2nd row within parent instead of the first.

Here is the function:

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


Here is my JSFiddle link that has my html and everything:

JSFiddle Link

Also can anyone point me in the right direction on getting the subtotals for the columns within each parent? I am getting the grand totals like this:

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

If you want the subtotal at the top of the group, use .before() instead of .after() - $('.parent').parent() selects the first <tr> of the group, which includes the first row of data.

As for calculating the subtotals, here's a strategy that uses the rowspan attribute on each <td class="parent">. The rowspan value represents the number of rows in each group. This can be used to find the sub-sum of each column in the group:

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

Comments