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


__

这里是我的数组值。此数组包含重复值，如'ar','ar','de','de'等等＆amp;每个值创建一行。我想要的是如何将重复值合并到单个单元格。这是我的代码去。

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);

我不知道在这里使用rowspan的位置。我刚刚清空重复的值，这就是创造空的td＆＃39; s。所以请帮帮我。提前谢谢。

Answer 1

计算字符串在数组中的频率，并在rowspan

中将其添加为td_dmxn

示例中没有一些不必要的（关于问题）行：

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);

Answer 2

您需要按列值对列表元素进行分组：

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);

这是fiddle。我认为就是你想要的。

由于没有内置的groupBy构造，我从此answer借了一个。

使用rowspan将重复值单元格合并到具有相同数量空间的单个单元格中

2 个答案: