testTabl5

testing1235

by khemikal

HTML

<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>
 ...

CSS

.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
}

JavaScript

$(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></td><td class="sub0">Sub Total</td><td class="sub1">' + subTotal2 + '</td><td class="sub2">' + subTotal3 + '</td></tr>');
  });
});