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 Fiddle demo

或者，更简洁一点：

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

JS Fiddle demo

还有一个更有用的方法，它将相邻行的单元格与class的{{1}}合并：

two

JS Fiddle demo

Answer 2

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

$('#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

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

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

你应该得到你需要的结果。但是我没有亲自尝试通过jquery更改rowspan / colspan属性，我只是假设它运行良好。希望它有所帮助。

p.s：修正过的数字，以为你需要首先合并9和10：）

使用jQuery修改表结构（合并单元格）

3 个答案: