javascript - 使用 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


__

这是我的值数组。该数组包含重复值，例如 '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。所以请帮助我。提前致谢。

Answer 1

计算字符串在数组中出现的频率，并将其添加为 td_dmxn 中的 rowspan

没有一些不必要的(就问题而言)行的示例:

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