如何插入 <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节点，而是移动它们，因此完全不需要删除。

快速举例 ：

$('.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原始订单上的: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);    
});