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

PS还有一件事,数据最初是在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个细胞提供了良好的解决方案.这是他的解决方案.但是,如果有超过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);
}

Answer 2

请使用行展开/折叠查找针对您的查询的改进答案.这是我的小提琴:

function MergeGridCells()
{
    var dimension_cells = new Array();
    var dimension_col = null;

    var i = 1;
    // First, scan first row of headers for the "Dimensions" column.
    $("#mytable").find('th').each(function () {
        if ($(this).text() == 'Id') {
            dimension_col = i;
        }
        i++;
    });

    // first_instance holds the first instance of identical td
    var first_instance = null;
    var rowspan=1;
    // iterate through rows
    $("#mytable").find('tr.parent-grid-row').each(function () {

        // find the td of the correct column (determined by the dimension_col set above)
        var dimension_td = $(this).find('td.parent-grid-column:nth-child(' + dimension_col + ')');

        if (first_instance == null) {
            // must be the first row
            first_instance = dimension_td;
        } else if (dimension_td.text() == first_instance.text()) {
            // the current td is identical to the previous
            // remove the current td
            dimension_td.remove();
            ++rowspan;
            // increment the rowspan attribute of the first instance
            first_instance.attr('rowspan', rowspan);
        } else {
            // this cell is different from the last
            first_instance = dimension_td;
            rowspan=1;
        }
    });
}

Jquery Cell Merging