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

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

本文关键字：单元格 空间 单个 合并 rowspan 使用      更新时间：2023-09-26
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'等&每个值创建一行。我想要的是如何合并重复的值在单个单元格。下面是我的代码。

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。所以请帮帮我。

计算字符串在数组中出现的频率，并将其作为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);

您需要根据它们的值对列表元素进行分组:

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);
这是小提琴。我认为这就是你想要的。

因为没有内置的groupBy结构，所以我从这个答案中借用了一个。

相关文章：