Merging Rows In One Column Of Html Table

I have a requirement, if i have same data in column1 of 's with same id then i need to merge those cells and show their respective values in column2. i.e., in fiddle http://jsfiddl

Solution 1:

Building on tkounenis' answer using Rowspan:

One option to implement what you need would be to read all the values in your table after being populated, then use a JS object literal as a data structure to figure out what rows/columns are unique.

A JS object literal requires a unique key which you can map values to. After figuring out what rows/columns should be grouped, you can either edit the original table, or hide the original table and create a new table (I'm creating new tables in this example).

I've created an example for you to create a new table either grouped by key or grouped by value. Try to edit the examples provided to introduce both requirements.

Let me know if you need more help. Best of luck.

JSFiddle: http://jsfiddle.net/biz79/x417905v/

JS (uses jQuery):

sortByCol(0);
sortByCol(1);

function sortByCol(keyCol) {
    // keyCol = 0 for first col, 1 for 2nd col
    var valCol = (keyCol === 0) ? 1 : 0;
    var $rows = $('#presort tr');
    var dict = {};
    var col1name = $('th').eq(keyCol).html();
    var col2name = $('th').eq(valCol).html();

    for (var i = 0; i < $rows.length; i++) {

        if ($rows.eq(i).children('td').length > 0) {

            var key = $rows.eq(i).children('td').eq(keyCol).html();
            var val = $rows.eq(i).children('td').eq(valCol).html();

            if (key in dict) {
                dict[key].push(val);
            } else {
                dict[key] = [val];
            }
        }
    }
    redrawTable(dict,col1name,col2name);
}


function redrawTable(dict,col1name,col2name) {
    var $table = $('<table>').attr("border",1);
    $table.css( {"width":"300px" } );
    $table.append($('<tr><th>' +col1name+ '</th><th>' +col2name+ '</th>'));

    for (var prop in dict) {
        for (var i = 0, len = dict[prop].length; i< len; i++) {

          var $row = $('<tr>');

          if ( i == 0) {
            $row.append( $("<td>").attr('rowspan',len).html( prop ) );
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          else {
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          $table.append($row);
        }

    }
    $('div').after($table);
}

Solution 2:

Use the rowspan attribute like so:

<table width="300px" height="150px" border="1">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td id="1" rowspan="3">data&nbsp;&nbsp;&nbsp;1</td>
        <td id="aa">AA</td>
    </tr>
    <tr>
        <td id="bb">BB</td>
    </tr>
    <tr>
        <td id="cc">CC</td>
    </tr>
    <tr>
        <td id="2" rowspan="2">data&nbsp;&nbsp;&nbsp;2</td>
        <td id="dd">DD</td>
    </tr>
    <tr>
        <td id="ee">EE</td>
    </tr>
    <tr>
        <td id="3">data&nbsp;&nbsp;&nbsp;3</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="4">data&nbsp;&nbsp;&nbsp;4</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="5">data&nbsp;&nbsp;&nbsp;5</td>
        <td id="ff">FF</td>
    </tr>
</table>

Solution 3:

http://jsfiddle.net/37b793pz/4/

Can not be used more than once the same id. For that use data-id attribute

HTML:

<table width="300px" height="150px" border="1">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valaa">AA</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valbb">BB</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valcc">CC</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valdd">DD</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valee">EE</td>
    </tr>
    <tr>
        <td data-id="key3">data&nbsp;&nbsp;&nbsp;3</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key4">data&nbsp;&nbsp;&nbsp;4</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key5">data&nbsp;&nbsp;&nbsp;5</td>
        <td data-id="valff">FF</td>
    </tr>
</table>
</td>
</tr>
<tr>
    <td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px"></td>
</tr>
</table>

JQ:

//merge cells in key column
function mergerKey() {    

    // prevents the same attribute is used more than once Ip
    var idA = [];

    // finds all cells id column Key
    $('td[data-id^="key"]').each(function () {

        var id = $(this).attr('data-id');

        // prevents the same attribute is used more than once IIp
        if ($.inArray(id, idA) == -1) {
            idA.push(id);

            // finds all cells that have the same data-id attribute
            var $td = $('td[data-id="' + id + '"]');

            //counts the number of cells with the same data-id
            var count = $td.size();
            if (count > 1) {

                //If there is more than one
                //then merging                    
                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}

//similar logic as for mergerKey()
function mergerVal() {
    var idA = [];
    $('td[data-id^="val"]').each(function () {
        var id = $(this).attr('data-id');

        if ($.inArray(id, idA) == -1) {
            idA.push(id);
            var $td = $('td[data-id="' + id + '"]');
            var count = $td.size();
            if (count > 1) {

                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}

mergerKey();
mergerVal();

Solution 4:

Use below snippet of javascript. It should work fine for what you are looking.

<script type="text/javascript">
        function mergeCommonCells(table, columnIndexToMerge){
        	previous = null;
            cellToExtend = null;
            table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
                jthis = $(this);
                content = jthis.text();
                if(previous == content){
                    jthis.remove();
                    if(cellToExtend.attr("rowspan") == undefined){
                        cellToExtend.attr("rowspan", 2);
                    }
                    else{
                        currentrowspan = parseInt(cellToExtend.attr("rowspan"));
                        cellToExtend.attr("rowspan", currentrowspan+1);
                    }
                }
                else{
                    previous = content;
                    cellToExtend = jthis;
                }
            });
        };

        mergeCommonCells($("#tableId"), 1);
    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>