Question

想象一下，我有一张桌子，就像这样：

<table>
  <tr><td>A</td><td>B</td></tr>
  <tr><td>D</td><td>E</td></tr>
  <tr><td>G</td><td>H</td></tr>
</table>

呈现，表格如下：

A B
D E
G H

我希望在此表中添加一个新列，以便它显示为：

A B C
D E F
G H I

我知道我可以使用jQuery添加一个新列：

$('table tr').append('<td>NEW</td>');

结果是：

A B NEW
D E NEW
G H NEW

我想知道是否有办法在每行的末尾附加一个唯一的项目。以下不会这样做，但类似的东西会很好：

$('table tr').append('<td>C</td>','<td>F</td>','<td>I</td>');

Answer 1

您可以使用以回调作为参数的.append()，然后使用数组返回要返回的项目

var array = ['<td>C</td>', '<td>F</td>', '<td>I</td>'];
$('table tr').append(function (i) {
    return array[i];
});

演示：Fiddle

Answer 2

您可以做的是将数据保存在一个数组中。像

tdArray=["<td>C</td>", '<td>F</td>', '<td>I</td>'];
var i = 0;

并做

$('table tr').each(function(){
    $(this).append(tdArray[i]);
    i++
}

Answer 3

.append()可以获取一个获取索引参数的函数，以及jQuery集中的每个匹配元素，因此您可以使用它来为每一行执行条件逻辑。

e.g。一个简单的例子：

$('table tr').append(function (i) {
    switch (i) {
        case 0: return '<td>C</td>';
        case 1: return '<td>F</td>';
        case 2: return '<td>F</td>';
    }
});

当然，你可以添加你需要的任何智能。

向表中添加一列唯一项

3 个答案: