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 = 0for first col, 1for2nd 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:

<tablewidth="300px"height="150px"border="1"><tr><th>Key</th><th>Value</th></tr><tr><tdid="1"rowspan="3">data&nbsp;&nbsp;&nbsp;1</td><tdid="aa">AA</td></tr><tr><tdid="bb">BB</td></tr><tr><tdid="cc">CC</td></tr><tr><tdid="2"rowspan="2">data&nbsp;&nbsp;&nbsp;2</td><tdid="dd">DD</td></tr><tr><tdid="ee">EE</td></tr><tr><tdid="3">data&nbsp;&nbsp;&nbsp;3</td><tdid="ff">FF</td></tr><tr><tdid="4">data&nbsp;&nbsp;&nbsp;4</td><tdid="ff">FF</td></tr><tr><tdid="5">data&nbsp;&nbsp;&nbsp;5</td><tdid="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:

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

JQ:

//merge cells in key columnfunctionmergerKey() {    

    // prevents the same attribute is used more than once Ipvar 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 IIpif ($.inArray(id, idA) == -1) {
            idA.push(id);

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

            //counts the number of cells with the same data-idvar 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()functionmergerVal() {
    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">
        functionmergeCommonCells(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>

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