Modify table structure (merge cells) with jQuery

Answer 1

You actually need to add rowspan to ds10 and then remove ts11 from the second row here. Change you code from colspan to rowspan, add the following

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

and you should get result you need. But i didn't personally try changing rowspan/colspan attributes via jquery, i'm just assuming it works well. Hope it helps.

p.s.: corrected numbers, thought u need to merge 9 and 10 first :)

Answer 2

This works for me. Merges cells with same text: Logic: for each cell, if next cell same text, remove next cell, increment colSpan. (Note "colSpan", not "colspan" - apparently a browser compat issue)

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

If you must use jQuery, then this works:

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

JS Fiddle demo.

Or, somewhat more concisely:

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

JS Fiddle demo.

And a slightly more...useful approach, which will merge cells of adjacent rows with the class of 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.