使用 jQuery 修改表结构(合并单元格)

Question

>我有一个表格

<table>
<tr><td>9:00</td><td id='ts9'>task1</td></tr>
<tr><td>10:00</td><td id='ts10'></td></tr>
<tr><td>11:00</td><td id='ts11'>task2</td></tr>
<tr><td>12:00</td><td id='ts12'>task3</td></tr>
</table>

我需要将 id 为 10 和 11 的单元格合并为一个，因为该任务需要 2 小时。我正在使用jQuery。

我想到了：

$("#ts9").attr('colSpan', 2);

但它行不通。

Answer 1

如果你必须使用 jQuery，那么这就可以了：

$('#ts10')
    .text($('#ts11').text())
    .attr('rowspan','2')
    .closest('tbody')
    .find('#ts11')
    .remove();​

JS小提琴演示。

或者，更简洁一点：

$('#ts10')
    .text($('#ts11').remove().text())
    .attr('rowspan','2');​

JS小提琴演示。

还有稍微多一点...有用的方法，它将相邻行的单元格与two class合并：

$('tr td.two').each(
    function(){
        var that = $(this),
            next = that.parent().next().find('.two');
        if (next.length){
            that
                .text(next.remove().text())
                .attr('rowspan','2');
        }
    });

JS小提琴演示。

Answer 2

这对

我有用。合并具有相同文本的单元格：逻辑：对于每个单元格，如果下一个单元格的文本相同，则删除下一个单元格，递增 colSpan。（注意"colSpan"，而不是"colspan" - 显然是浏览器兼容性问题）

$('#tblData tbody tr:first-child td').each(function(){
 var colSpan=1;
 while( $(this).text() == $(this).next().text() ){
  $(this).next().remove();
  colSpan++;
 }
$(this).attr('colSpan',colSpan);
});

Answer 3

您实际上需要将行跨度添加到 ds10，然后从此处的第二行中删除 ts11。将代码从 colspan 更改为行跨度，添加以下内容

$("#ts11").remove();

你应该得到你需要的结果。但我个人并没有尝试通过 jquery 更改行跨度/列跨度属性，我只是假设它运行良好。希望对您有所帮助。

PS：更正了数字，认为您需要先合并 9 和 10 :)