javascript - 使用 jQuery 合并相等的表格单元格

Question

具有 NxM 值的简单 html 表。目的是用 jQuery 合并列中的相等单元格。请注意，一行中没有重复项。

我知道如何隐藏相等的单元格，但是有什么方法可以将一个单元格与一个空单元格合并为一个单元格吗？

html:

<table border="1" id="testTable">
<tr>
    <td>First</td>
    <td>A</td>
    <td>A</td>
</tr>
<tr>
    <td>First</td>
    <td>A</td>
    <td>B</td>
</tr>
<tr>
    <td>Second</td>
    <td>V</td>
    <td>S</td>
</tr>
<tr>
    <td>Third</td>
    <td>D</td>
    <td>H</td>
</tr>
<tr>
    <td>Third</td>
    <td>E</td>
    <td>E</td>       
</tr>
</table>

js:

var seenArray = {};
$('#testTable td').each(function() 
{
    var index =  $(this).index();
    var txt = $(this).text();
    if (seenArray[index] === txt) 
    {
        $(this).text(''); //I think here should be "marging"
    }
    else 
    {
        seenArray[index] = txt;
    }
});

jsFiddle

P.S. 还有一件事，数据最初是在 json 数组中检索的，然后我先执行 .parseJSON() 并将数据放入表中使用:

for (var i = 0; i < obj.length; i++) 
{
    tr = $('<tr/>');
    tr.append("<td>" + obj[i]['columnA'] + "</td>");
    tr.append("<td>" + obj[i]['columnB'] + "</td>");
    tr.append("<td>" + obj[i]['columnC'] + "</td>");
    $('#testTable').append(tr); 
}

UPD

alFReD NSH为 2 个电池做了一个很好的解决方案。 Here是他的解决方案。但是，如果会有超过 2 个相等的单元格。

Answer 1

如果我明白你的意思，这是我编辑的版本:http://jsfiddle.net/djhU7/4/

所以我没有使用 $(this).text('') 而是这样做的:

    $($this.parent().prev().children()[index]).attr('rowspan', 2);
    $this.hide();

我所做的是将第一个单元格的 rowspan 设置为 2。此属性“将指示单元格扩展的行数”。这将使上面的单元格变大两倍，我用重复信息隐藏了单元格，这样多余的单元格就会消失。请注意，删除单元格将破坏下一个单元格的索引检查。这只是一个快速而肮脏的解决方案，但必须在某处使用 rowspan 属性来实现它。

这是另一个版本，它在将单元格插入表格时设置行跨度，除了它适用于 3 个重复单元格和更多单元格之外，它也更快，因为它避免了表格的重新渲染(尽管它可以进一步优化，但我认为此刻你不想关心它，过早的优化是万恶之源!):http://jsfiddle.net/g7uY9/1/

for (var i = 0; i < obj.length; i++) {


   tr = $('<tr/>');

    addColumn(tr, 'columnA', i);
    addColumn(tr, 'columnB', i);
    addColumn(tr, 'columnC', i);
    $('#testTable').append(tr);

}

function addColumn(tr, column, i) {
    var row = obj[i],
        prevRow = obj[i - 1],
        td = $('<td>' + row[column] + '</td>');
    if (prevRow && row[column] === prevRow[column]) {
        td.hide();
    } else {
        var rowspan = 1;
        for (var j = i; j < obj.length - 1; j++) {
            if (obj[j][column] === obj[j + 1][column]) {
                rowspan++;
            } else {
                break;
            }
        }
        td.attr('rowspan', rowspan);
    }

    tr.append(td);
}