Jquery to Merge HTML Table Row for same group of data using rowsapn attribute

When we need to represent data in an HTML Table, more often we need to merge same cell value or row td value. Here in this article I will show you “How one can easily merge same group of data of an HTML Table using JQUERY“. To merge the same cell value of a table we need to know the rowspan HTML Table attribute. After iterating each table row we need to compare the previous td/cell value, if same then we need to increase the rowspan value by 1. Simple – isn’t it.

Merged Table Cell Example:
Jquery to Merge HTML Table Row for same group of data using rowsapn attribute

HTML Table code block for the example:

    <table id="tblSample" border="1px" cellpadding="2" cellspacing="2" style="border-collapse:collapse;">
        <thead>
            <tr><th>Group</th><th>Sub Group</th><th>Details</th></tr>
        </thead>
        <tbody>
            <tr><td>Group#1</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
            <tr><td>Group#1</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
            <tr><td>Group#1</td><td>Sub-Group#3</td><td>Some description here.........</td></tr>
            <tr><td>Group#2</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
            <tr><td>Group#2</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
            <tr><td>Group#3</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
            <tr><td>Group#4</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
            <tr><td>Group#4</td><td>Sub-Group#2</td><td>Some description here.........</td></tr>
            <tr><td>Group#4</td><td>Sub-Group#3</td><td>Some description here.........</td></tr>
            <tr><td>Group#5</td><td>Sub-Group#1</td><td>Some description here.........</td></tr>
        </tbody>
    </table>

JQuery Script To Merge Table Cells:

    <script type="text/javascript">
        $(document).ready(function () {
            $('#tblSample').each(function () {
                var Column_number_to_Merge = 1;

                // Previous_TD holds the first instance of same td. Initially first TD=null.
                var Previous_TD = null;
                var i = 1;
                $("tbody",this).find('tr').each(function () {
                    // find the correct td of the correct column
                    // we are considering the table column 1, You can apply on any table column
                    var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');
                    
                    if (Previous_TD == null) {
                        // for first row
                        Previous_TD = Current_td;
                        i = 1;
                    } 
                    else if (Current_td.text() == Previous_TD.text()) {
                        // the current td is identical to the previous row td
                        // remove the current td
                        Current_td.remove();
                        // increment the rowspan attribute of the first row td instance
                        Previous_TD.attr('rowspan', i + 1);
                        i = i + 1;
                    } 
                    else {
                        // means new value found in current td. So initialize counter variable i
                        Previous_TD = Current_td;
                        i = 1;
                    }
                });
            });
        });
    </script>

Note: Don’t forget to add JQuery library reference in your HTML or aspx page.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net
One comment on “Jquery to Merge HTML Table Row for same group of data using rowsapn attribute
  1. Priyabrata says:

    What to do if for all columns.

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*