javascript - 将行添加到表格时更改数字列

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 小提琴演示。

因为prepend()(and append()) 返回调用它的相同对象/节点（不是预先添加的新元素），用于在新添加find()的元素中查找元素），并且与它的匿名函数（第一个参数（此处使用）是我们正在操作的元素/节点的索引，第二个（此处未使用）是当前元素的文本值）。此函数返回( 以使计数从一开始，而不是像 JavaScript 通常那样从零开始。td:first-childtrtext()index + 1

当然，如果你能够牺牲旧的浏览器，你可以只使用 CSS，给定 HTML：

<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>

以下 CSS 将（在大多数非 IE 浏览器中）自行充分工作：

tbody {
    /* resets the counter variable back to 1, in every tbody element */
    counter-reset: num;
}

tbody tr td:first-child::before {
    counter-increment: num; /* increments the named ('num') counter by one */
    content: counter(num); /* sets the content to value held in the 'num' counter */
}

JS 小提琴演示。

参考：

• jQuery：
  • find().
  • text().
• CSS：
  • CSS 计数器（在 Mozilla 开发者网络）。
  • counter-increment.
  • counter-reset.

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

在这里检查