how to insert a <td> to a <tr> using jquery

Question

I have a table with few rows, I just need to re arrange them, I am able to fetch <td> and <tr> and now what I need to do is to insert them back in a custom order

 $('.white-header').each(function() {  //white-header is the class used for <tr>
    var tr = $(this);

    var td1 = tr.find('td:eq(4)'); // indices are zero-based here
    var td2 = tr.find('td:eq(5)');
    var td3 = tr.find('td:eq(6)');
    var td4 = tr.find('td:eq(7)');
    var td5 = tr.find('td:eq(8)');
    var td6 = tr.find('td:eq(9)');
    var td7 = tr.find('td:eq(10)');
    td1.remove();
    td2.remove();
    td3.remove();
    td4.remove();
    td5.remove();
    td6.remove();
    td7.remove();
    tr.insert(td7); // here am getting errors, i tried .append also
    tr.insert(td6);
    tr.insert(td4);
});

i just need to know how to insert td to this tr (currently tr is blank i guess, after removing all td)

Answer 1

You do not need .remove() at all. All you need is to use append and prepend (or appendTo and prependTo) in a clever way to rearrange your cells. These methods do not copy DOM nodes, they move them, so removal is completely unnecessary.

Quick example:

$('.white-header').each(function() {
    var tr = $(this);  

    tr.find('td:eq(4)').appendTo(tr);
    tr.find('td:eq(6)').appendTo(tr);
    tr.find('td:eq(9)').prependTo(tr);
});

(in my example the order of the elements might seem strange at the end, because I don't run :eq on the original order, but always on the already changed order - this is only a quick example)

Answer 2

You are trying to append the deleted objects, You need to make clone of <td> and remove the <td> objects you have later append the cloned objects of insert

$('.white-header').each(function() {  //white-header is the class used for <tr>
    var tr = $(this);
    var td1 = tr.find('td:eq(4)'); // indices are zero-based here
    var td2 = tr.find('td:eq(5)');
    var td3 = tr.find('td:eq(6)');
    var td4 = tr.find('td:eq(7)');
    var td5 = tr.find('td:eq(8)');
    var td6 = tr.find('td:eq(9)');
    var td7 = tr.find('td:eq(10)');
    td1.remove();
    td2.remove();
    td3.remove();
    td4Cloned = td4.clone();
    td4.remove();
    td5.remove();
    td6Cloned = td6.clone();
    td6.remove();
    td7Cloned = td7.clone();
    td7.remove();

    tr.insert(td7Cloned); // here am getting errors, i tried .append also
    tr.insert(td6Cloned);
    tr.insert(td4Cloned);
});

Answer 3

Try using .detach()

$('.white-header').each(function() {  //white-header is the class used for <tr>
    var tr = $(this);    

    var td1 = tr.find('td:eq(4)').detach(); // indices are zero-based here
    var td2 = tr.find('td:eq(5)');
    var td3 = tr.find('td:eq(6)').detach();
    var td4 = tr.find('td:eq(7)').detach();
    var td5 = tr.find('td:eq(8)');
    var td6 = tr.find('td:eq(9)');
    var td7 = tr.find('td:eq(10)');
    td1.remove();
    td2.remove();
    td3.remove();
    td5.remove();

    tr.append(td7); // here am getting errors, i tried .append also
    tr.append(td6);
    tr.append(td4);    
});