Merge duplicate value cells into single cells with same amount space using rowspan

Question

var arr = ['ar', 'ar', 'ar', 'ar', 'at', 'br', 'de', 'de', 'de', 'jp', 'jp', 'us', 'us', 'us', 'us', 'us', 'us'];

__


ar

__
at
__
br
__

de

__

jp

__



us


__

here goes my array of values. This array contains repeating values like 'ar','ar','de','de' and so on & each values create one row. what i want is how to merge the repeating values in to single cell.Here is my code goes.

var table = document.createElement('table');
table.style.border = '1px solid black';

for (var i = 0; i < arr.length; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    var td_dmxn = document.createElement('td');
    td_dmxn.style.border = "1px solid black";
    td_dmxn.innerHTML = arr[i];
    td_dmxn.style.textAlign = "center";
    var row = arr[i],
            prevRow = arr[i - 1];
    if (prevRow && row === prevRow) {
        td_dmxn.innerHTML = '';

    } else {

    }
    $(tr).append(td_dmxn);
}
document.body.appendChild(table);

I dont know where to use rowspan in here. i just emptied the repeating values this is creating empty td's. so please help me. thanks in advance.

Rather than merging the cells, why not remove the duplicates from the array? http://stackoverflow.com/questions/9229645/remove-duplicates-from-javascript-array — Rory McCrossan, Jul 31 '15 at 13:18
No i want to merge the cells that is my requirement. and the empty cells also provide the equal space. — htoniv, Jul 31 '15 at 13:19
provide html expected results when duplicate cells are merged. "Merge" be interpreted several ways — charlietfl, Jul 31 '15 at 13:22
Place this `$(tr).append(td_dmxn);` in the else part of your if instruction — Hackerman, Jul 31 '15 at 13:29
My table rows wants to be like this i provided in my latest edits. please someone help me. — htoniv, Jul 31 '15 at 13:30

score 1 · Answer 1 · answered Jul 31 '15 at 13:38

Count how often a string is in the array and add this as rowspan in the td_dmxn

Example without some unnecessary (in respect to the problem) lines:

var arr = ['ar', 'ar', 'ar', 'ar', 'at', 'br', 'de', 'de', 'de', 'jp', 'jp', 'us', 'us', 'us', 'us', 'us', 'us'],
    groups,
    keys,
    table = document.createElement('table'),
    docFragment = document.createDocumentFragment(),
    tr,
    td_dmxn,
    i;

// group and count the strings in the array
groups = arr.reduce(function (l, r) {
    if (typeof l[r] === "undefined") {
        l[r] = 0;
    }
    l[r] += 1;

    return l;
}, {});

// extract the keys to get the number of occurrence
keys = Object.keys(groups);

// add the rows and cells (incl. rowspan)
for (i = 0; i < keys.length; i++) {
    tr = document.createElement('tr');
    
    td_dmxn = document.createElement('td');
    td_dmxn.rowSpan = groups[keys[i]];  // add the rowspan
    td.innerHTML = keys[i];
    
    tr.appendChild(td_dmxn);
    docFragment.appendChild(tr);
}
table.appendChild(docFragment);
document.body.appendChild(table);

score 0 · Answer 2 · edited Apr 13 '17 at 12:40

You need to group the list elements by their value:

function groupBy(array, f) {
    var groups = {};
    array.forEach(function (o) {
        var group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
    });
    return Object.keys(groups).map(function (group) {
        return groups[group];
    })
}

var arr = ['ar', 'ar', 'ar', 'ar', 'at', 'br', 'de', 'de', 'de',
    'jp', 'jp', 'us', 'us', 'us', 'us', 'us', 'us'];

arr = groupBy(arr, function (item) {
   return [item];
});

var table = document.createElement('table');
table.style.border = '1px solid black';

for (var i = 0; i < arr.length; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    var td_dmxn = document.createElement('td');
    td_dmxn.style.border = "1px solid black";
    td_dmxn.innerHTML = arr[i];
    td_dmxn.style.textAlign = "center";
    $(tr).append(td_dmxn);
}
document.body.appendChild(table);

Here is the fiddle. I think that is what you want.

Because there is no built-in groupBy construct I borrowed one from this answer.

@charlietfl My bad. It looks like I missed that part of the question. I _will_ update my answer but I would first please like to know, @htoniv, if this answers your question? I _suspect_ this _could_ be an example of the [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) with regards to `rowspan`. — Alex Booker, Jul 31 '15 at 13:29

Merge duplicate value cells into single cells with same amount space using rowspan

2 Answers2