как вставить <td> в <tr> с помощью JQuery

Question

У меня есть table с несколькими строками, мне просто нужно повторно организовать их, я могу принести <td> и <tr> и теперь, что мне нужно сделать, это вставить их обратно в нестандартный заказ

$('.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); 
}); 

я просто нужно знать, как вставить td к этому tr (в настоящее время tr пустым, я думаю, после удаления всех td)

Answer 1

Вам не нужно .remove() вообще. Все, что вам нужно, - это использовать append и prepend (или appendTo и prependTo) умным способом изменить ваши ячейки. Эти методы не копируют узлы DOM, они перемещают их, поэтому удаление полностью не нужно.

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

(в моем примере порядок элементов может показаться странным, в конце концов, потому что я не запускать :eq на первоначальном порядке, но всегда на уже измененный порядке - это только быстрый пример)

Answer 2

Вы пытаетесь добавить в удаленных объектов, Вы должны сделать клон <td> и удалить <td> объекты вы позже добавить клонированные объекты вставки

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

Попробуйте использовать .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);  
});