Изменить структуру таблицы (объединить ячейки) с 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> 

и мне нужно объединить ячейки с идентификатором 10 и 11 в одном, так как эта задача занимает 2 часа. Я использую jQuery.

Я думал:

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

Но это не будет работать.

Answer 1

Вы на самом деле нужно добавить RowSpan в DS10, а затем удалить TS11 из второго ряда здесь. Измените код от colspan до rowspan, добавьте следующее:

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

и вы должны получить нужный вам результат. Но я лично не пытаюсь изменить атрибуты rowspan/colspan с помощью jquery, я просто предполагаю, что он работает хорошо. Надеюсь, поможет.

p.s .: исправлен числа, мысли и нужно слить 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.

И немного больше ... полезный подход, который будет объединять ячейки соседних рядов с 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.

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