Question

有一个看起来像这样的表：

[Cell][Cell][Cell][Cell]
[Cell][Cell][Cell][Cell]
[Cell][Cell][Cell][Cell]

我想在运行时将其内容更改为：

[Cell][Cell][  ONE ]
[Cell][Cell][  BIG  ]
[Cell][Cell][  CELL ]

然后有能力将其恢复到原始状态。

根据您的经验，实现此类行为的最佳方法是什么？

更新：以下是我想在不创建新表的情况下dynamically做的事情： http://jsfiddle.net/pyuQD/3/

Answer 1

这是我的方法。
您只需将另一个单元格添加到第一行并隐藏它。您还可以为其指定rowspan和colspan属性。然后，您可以使用jQuery切换td和.one-big-cell 通过添加额外的td，我们当然会浪费DOM，但这样可以更容易地保留所有td的整个内容。

<强> HTML ：

<table>
    <tr>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
        <td class="one-big-cell" colspan="2" rowspan="3">ONE BIG CELL</td>
    </tr>
    <tr>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
    </tr>
    <tr>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
        <td>CELL</td>
    </tr>
</table>

<强> CSS ：

.one-big-cell {
    display: none;
}

<强>的jQuery ：

$bigCell = $('table .one-big-cell');
$('#switch').on('click', function() {
    if ($bigCell.is(':visible')) {
        $('table td:not(:visible)').show();
    } else {
        $('table td:nth-child(2), table td:nth-child(3)').not('.one-big-cell').hide();
    }
    $bigCell.toggle();
});

DEMO ：http://jsfiddle.net/JnxL4/

Answer 2

您可以根据需要使用colspan隐藏单元格并将其保留为隐藏单元格。您可以编写一个函数来显示隐藏的单元格，并且可以隐藏要隐藏的单元格。

显示/隐藏大/小单元格的方法可能如下所示。

    
    $("#merge").click(function() {
        $("table tr td.bigcell").show().prev().hide().prev().hide();
    });
    $("#revert").click(function() {
        $("table tr td.bigcell").hide().prev().show().prev().show();
    });

请查看以下小提琴，了解上述方法的工作版本 enter link description here

在运行时更改表列和行跨度

2 个答案: