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

但是它不起作用。

- user1342645

Answer 1

如果你必须使用jQuery，那么这个方法可以实现：

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

JS Fiddle demo，点击此处查看示例。

或者更简洁地说：

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

JS Fiddle演示。

另外还有一种稍微更加有用的方法，可以合并具有class为two的相邻行的单元格：

$('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 Fiddle demo.

- David Thomas

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

- Manny in Cape Town

---

我认为这种方法看起来不错，但我无法完全使其工作，它只能合并第一行，在我的情况下，您能否更新它以检查所有行？此外，在我的情况下，我想让它检查rowSpan（从上到下），如果我只更改colSpan为rowSpan，是否有帮助？还是我应该做些其他的事情？ - Yogurtu

Answer 3

你需要在 ds10 中添加 rowspan，然后从第二行中 删除 ts11。将代码从 colspan 更改为 rowspan，并添加以下内容：

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

你应该得到你需要的结果。但我个人没有尝试过通过jquery更改rowspan/colspan属性，我只是假设它能够正常工作。希望能帮到你。

p.s.：更正了数字，以为你需要先合并9和10 :)

- Devtrix.net