與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

你實際上需要行跨度添加到DS10，然後從第二行刪除 TS11在這裏。將您的代碼從colspan更改爲rowspan，請添加以下內容

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

並且您應該獲得您需要的結果。 但我沒有親自嘗試通過jQuery改變rowspan/colspan屬性，我只是假設它運作良好。希望能幫助到你。

P.S：修正數字，認爲u需要合併9,10第一:)

Answer 2

如果必須使用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。

和稍微更多...有用的方法，這將合併相鄰行的細胞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 Fiddle demo。

Answer 3

這適用於我。合併具有相同文本的單元格：邏輯：對於每個單元格，如果下一個單元格的文本相同，請刪除下一個單元格，然後增加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); 
});