用jQuery插入表格列

Question

我有一个数据表，需要动态添加一列。假设我有以下基本表格：

<table>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
 <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
</table>

我想在每行的第一个单元格和第二个单元格之间插入一列……我尝试了这个方法，但它没有像我期望的那样正常工作……

$(document).ready(function(){
 $('table').find('tr').each(function(){
  $(this).prepend('<td>cell 1a</td>');
 })
})

- Mottie

Answer 1

试试这个：

$(document).ready(function(){
    $('table').find('tr').each(function(){
        $(this).find('td').eq(0).after('<td>cell 1a</td>');
    });
});

你的原始代码会将列添加到每一行的末尾，而不是在列之间。此代码找到第一列并在第一列旁边添加单元格。

- Dan Herbert

---

太好了，谢谢！这个完美地解决了问题！... 拍脑袋 我应该先找到单元格，然后再把它放在后面。我真的需要一些咖啡因哈哈 - Mottie

我最终使用了 td:eq(0)，因为有时我需要在一个有超过3列的表格中插入一列，那么我只需要更改变量即可...再次感谢您的帮助！ - Mottie

那是一个更好的想法。我已经修改了我的答案，包括这个想法。 - Dan Herbert

提醒一下，如果你需要在表格中间插入某些内容，请注意列的位置，因为你可能需要考虑到具有colspan属性的单元格。 - Sam Plus Plus

Answer 2

$('table > tr > td:first-child').after( '<td>cell 1a</td>' );

tr > td 选择一个 tr 后的第一级 td，并且 after 在元素外插入数据。

- Stefan Kendall

---

这段代码不起作用，因为大多数浏览器会将所有行都包裹在 <tbody> 标签内，所以选择器需要是 "table > tbody > tr > td:first-child"。当然，在一个大表格中执行这个查询可能会比较慢，因为 jQuery 需要执行很多过滤操作来获取所有单元格... - Dan Herbert

Answer 3

$('td:first-child').after('<td>new cell</td>');

- Jackie