如何使用jQuery向<tr>中插入<td>元素

Question

我有一个带有几行的表格，我只需要重新排列它们，我可以获取<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后）。

- Amarnath R Shenoy

---

插入不是jQuery的方法。请使用append。 - yoavmatchulsky

请访问 http://api.jquery.com/category/manipulation/ 了解各种操作 DOM 的方法。 - UweB

append 也不起作用了，这是 jQuery 版本问题还是因为我的操作有问题 :-( - Amarnath R Shenoy

@user3239473，根据您最后的编辑，如果您不知道的话，您已经删除了所有格式和代码缩进。 - Saro Taşciyan

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，而是始终在已更改的顺序上运行-这只是一个快速示例。

- kapa

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

- Adil

---

.remove() 不会销毁 DOM 元素，它只是将其从父元素中分离出来！ - UweB

类似于 .empty() 方法，.remove() 方法可以将元素从 DOM 中移除，http://api.jquery.com/remove/ - Adil

@UweB那么.detach()有什么用处呢？ - Rajaprabhu Aravindasamy

正如文档中所指出的那样，detach将保留任何.data()，而.remove()则不会。 - UweB

@RajaprabhuAravindasamy，我制作了一个JSFiddle来说明.remove()的作用：使用remove（http://jsfiddle.net/KELMP/），`.data('x')`会被销毁，而detach（http://jsfiddle.net/KELMP/1/）则会保留它。 - UweB

@RajaprabhuAravindasamy 我也是，直到你提到.detach()我才知道它的存在，并想了解其中的区别。 :-) - UweB

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

- Rajaprabhu Aravindasamy

---

不客气，原始帖子中的代码没有缩进，所以我想所有的答案都会有这个问题 (: - Saro Taşciyan