testTable0

testing123

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

$(function() {
  $('.child').toggle();
});
//v is parent,z is child element,w is which child column....ex: 0 or 1, y is first run or not, z is class name you want assigned
function subtotals(v, w, x, y, z) {
    $(v).each(function (index, element) {
        var subTotalAmt = 0;
        var numRows = parseInt($(this).attr("rowspan"));
        var firstRow = $(this).parent();
        var lastRow = firstRow.nextAll('tr').slice(numRows - 2, numRows - 1);
        var currentRow = firstRow;
        for (i = 0; i < numRows; i++) {
        var tdValue=0;
        if(!isNaN(parseInt($(currentRow.children(w)[x]).text())))
        {
            tdValue=parseInt($(currentRow.children(w)[x]).text());
        }
        subTotalAmt += tdValue;
        currentRow = currentRow.next("tr");
    }
        if(y == 'yes'){
        lastRow.after('<tr><td class="sub0">Sub Total</td><td class="' + z + '">' + subTotalAmt + '</td></tr>');
        $(this).attr('rowspan', numRows + 1);
        }
        else {
        lastRow.append('<td class="' + z + '">' + subTotalAmt + '</td>');
        }        
    });
}
$(function doSubtotals() {
  subtotals('.parent','.child','1','yes','sub1');
  subtotals('.parent','.child','2','no','sub2');
});
//expand collapse based on parent class which is column 1
$(function expandCollapse() {
    $('.parent').prepend('+');

    $('.parent').on('click', function () {
        if ($(this).text().indexOf('-') != -1) {
            var str0 = $(this).text().replace(/-/g, '+');
            $(this).text(str0);
        } else {
            var str = $(this).text().replace(/\+/g, '-');
            $(this).text(str);
        }
        var $row = $(this).parent();
        var rowspan = +$(this).attr('rowspan') || 4;
        $.merge($row, $row.nextAll()).slice(0, rowspan).find('.child').toggle();
    });
});