Jan 27, 2012

HTML Table Row Grouping with jQuery

It’s easy to group data in SQL statement, but if you have to display it using HTML table, It’s not drag and drop as in reporting environment. One way to group on server side and draw tr td accordingly. But If it is already created with tons of functionality attached, It’s risky to change. Don’t worry, you can do it easily with jQuery.

html table row grouping jquery


Let’s take following HTML table as an example:

<table id="myTable" border="1" cellpadding="3" cellspacing="0">


Before using the following method, Make sure the data is sorted. The logic is to check row by row if data is same in next row’s td, remove next row’s td and increase rowspan of current row’s td.

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

groupTable method has 3 arguments:
$rows: jQuery object of table rows to be grouped
startIndex: index of first column to be grouped
total: total number of columns to be grouped

In above code startIndex =0 and total = 3 it means table is grouped by first, second and third column. After grouping, you need to remove deleted class elements like this:
$(‘#myTable .deleted’).remove();

you can use code, but need to keep CREDIT COMMENT. The idea came to implement this just one hour ago. So the code can be optimized. Anyway, let me know if you have any issue.

  • Luke MacNeil

    This is a great idea. Horribly inefficient, but exactly what I was trying to do. I’m going to try to impliment your logic a few different ways to see if I can make it fast.

  • Luke MacNeil

    I take it back, I just called it in a loop, much like a moron would do. Well done sir.

  • Lee

    great job. Thanks sir :*

  • Suraj James

    Hello.. How can the javscript function to group rows be called after data binding the gridview ?

  • You can use registerstartupscript/registerclientscript methods to call javascript method after binding the gridview

  • Adrian Karmel

    Hi, The unction is amazing, but I have a question. how I can do if I need rowspan without keep the column before only some column of my grid?

    Thank you


  • ElĂ­ Eduard J. Montero Vargas

    Hi, i have this example http://jsfiddle.net/87PA5/.

    I want in each iteration of InfinityScroll on the “Table” it will group again. Any solution?

  • Jaganathan B

    The correct link is http://jsfiddle.net/87PA5/8/

  • KM PR

    That’s very GREAT source code. I’ve found an automatic table merge source code like this. Thank you. <3

  • Diego Loaiza

    In c# code, parameter string of html code?

  • Diego

    Code in c# please