Row Grouping

Row Grouping with JQuery fucntion

by VENKATA VINAY BYSANI

HTML

<table id="myTable" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <th>Category</th>
    <th>Product</th>
    <th>Size</th>
    <th>Price</th>
    <th>Shipping</th>
  </tr>
  <tr>
    <td>Category-1</td>
    <td>Product-1</td>
    <td>Big</td>
    <td>102</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-1</td>
    <td>Product-1</td>
    <td>Big</td>
    <td>132</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-1</td>
    <td>Product-2</td>
    <td>Big</td>
    <td>130</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-1</td>
    <td>Product-2</td>
    <td>Small</td>
    <td>100</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-2</td>
    <td>Product-3</td>
    <td>Big</td>
    <td>130</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-2</td>
    <td>Product-3</td>
    <td>Big</td>
    <td>100</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-2</td>
    <td>Product-3</td>
    <td>Small</td>
    <td>100</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Category-2</td>
    <td>Product-4</td>
    <td>Big</td>
    <td>150</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Category-3</td>
    <td>Product-5</td>
    <td>Big</td>
    <td>150</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Category-3</td>
    <td>Product-5</td>
    <td>Small</td>
    <td>120</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Category-3</td>
    <td>Product-5</td>
    <td>Big</td>
    <td>120</td>
    <td>Free</td>
  </tr>
  <tr>
    <td>Category-4</td>
    <td>Product-6</td>
    <td>Big</td>
    <td>120</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Category-4</td>
    <td>Product-6</td>
    <td>Small</td>
    <td>120</td>
    <td>10</td>
  </tr>
</table>

JavaScript

$(function() {
  //Created By: Brij Mohan
  //Website: http://techbrij.com
  function groupTable($rows, startIndex, total) {
    if (total === 0) {
      return;
    }
    var i, currentIndex = startIndex,
      count = 1,
      lst = [];
    var tds = $rows.find('td:eq(' + currentIndex + ')');
    var ctrl = $(tds[0]);
    lst.push($rows[0]);
    for (i = 1; i <= tds.length; i++) {
      if (ctrl.text() == $(tds[i]).text()) {
        count++;
        $(tds[i]).addClass('deleted');
        lst.push($rows[i]);
      } else {
        if (count > 1) {
          ctrl.attr('rowspan', count);
          groupTable($(lst), startIndex + 1, total - 1)
        }
        count = 1;
        lst = [];
        ctrl = $(tds[i]);
        lst.push($rows[i]);
      }
    }
  }
  groupTable($('#myTable tr:has(td)'), 0, 3);
  $('#myTable .deleted').remove();
});