Jquery : How To Move Td To Another Tr?

Question

I've generated html and I need to restructuring the html using Jquery, like this: Original: &

Solution 1:

Try like this:

$( "#tr03 > td" ).appendTo( "#tr01" );

You can refer : http://api.jquery.com/appendTo/

Solution 2:

My one cent - use clone to copy the td's and then move the tds around so that you preserve the events attached to them, if any.

Solution 3:

Try

var $rows = $('#myTableID tr');

$rows.slice(0, Math.ceil($rows.length / 2)).each(function () {
    var $this = $(this),
        index = $this.index();
    $this.append($rows.eq(index * 2).find('td'))
    $this.append($rows.eq(index * 2 + 1).find('td'))
})

Demo: Fiddle

Solution 4:

this is other option you can create/replace table by click of button

max = 2

$("button").click(function() {
    var tr = $("table tr:last");
    if(!tr.length || tr.find("td").length >= max)
        $("table").append("<tr>");
    $("table tr:last").append("<td>hi</td>");
});

<tableborder=1></table><button>hi</button>

Solution 5:

var all_td = $('#myTableID tr').map(function () {
    return $(this).html();
}).get();
$('#myTableID tr').empty().each(function(i){
    var ret  = all_td.slice(i*2,++i*2);
    $(this).html(ret);
});

Fiddle Demo

Each tr will have two td

JavaScript Apprenticeships