<table id="tbl" 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>
-----------------------------------------------------------------------------
$(function () {
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($('#tbl tr:has(td)'), 0, 3);
$('#tbl .deleted').remove();
});
<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>
-----------------------------------------------------------------------------
$(function () {
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($('#tbl tr:has(td)'), 0, 3);
$('#tbl .deleted').remove();
});