Question

我有一个从服务器加载的表。我通过循环遍历服务器发送的元素来构建表。我有一个＃列，每次迭代都会增加。后来我想从AJAX加载项目并将它们添加到表格中。这工作正常，但它弄乱了＃列。

HTML：

<table id="colorlist">
    <thead>
        <th>#</th>
        <th>color</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>red</td>
        </tr>
        <tr>
            <td>2</td>
            <td>blue</td>
        </tr>
    </tbody>
</table>
<a href="#" id="add">add color</a>

JS：

$("#add").click(function () {
    event.preventDefault();
    $("#colorlist").prepend("<tr><td></td><td>grey</td></tr>");
});

JSFIDDLE

当我点击add color时，我希望将grey添加到表格的顶部并使＃1，而其他行增加。

Answer 1

我建议：

$("#add").click(function (event) {
    event.preventDefault();
    $("#colorlist").prepend("<tr><td></td><td>grey</td></tr>").find('tr td:first-child').text(function (i) {
        return i + 1;
    });

});

JS Fiddle demo

因为prepend()（和append()）返回调用它的同一对象/节点（不是前置的新元素），find()用于查找{{ 1}}新添加的td:first-child元素中的元素）和tr以及它的匿名函数（第一个参数（此处使用）是我们在其上的元素/节点的索引） '动作，第二个（此处未使用）是当前元素的文本值）。此函数返回text()（使计数从一开始，而不是像往常一样从零开始。

当然，如果你能够牺牲旧的浏览器，你可以使用CSS来实现这一点，给出HTML：

index + 1

以下CSS（在大多数非IE浏览器中）将自行运行：

<table id="colorlist">
    <thead>
        <th>#</th>
        <th>color</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>red</td>
        </tr>
        <tr>
            <td></td>
            <td>blue</td>
        </tr>
    </tbody>
</table>
<a href="#" id="add">add color</a>

JS Fiddle demo

参考文献：

jQuery的：
- find()。
- text()。
CSS：

Answer 2

这里是代码

$("#add").click(function () {
    event.preventDefault();
    $('tr').find('td').each(function(){
          if(parseInt($(this).text()))
         $(this).html(parseInt($(this).text())+1);
    });
    $("#colorlist").prepend("<tr><td>1</td><td>grey</td></tr>");
});

检查here

将行预先添加到表时更改数字列

2 个答案: