Javascript 将行前置到表中时更改数字列

我有一个从服务器加载的表。我通过循环服务器发送的元素来构建表。我有一个#列，它在每次迭代中递增。稍后，我想从AJAX加载项，并将它们预先添加到表中。这很好，但它把#列搞乱了

HTML:

#
颜色
1.
红色
2.
蓝色

JS:

$（“#添加”）。单击（函数（）{
event.preventDefault（）；
$（“#颜色列表”）。前置（“灰色”）；
});

当我单击

addcolor

时，我希望

grey

被添加到表的顶部，并在其他行向下递增时得到#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;
    });

});

以下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 */
}

参考资料：

• jQuery：
• CSS:
我建议：

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

});

以下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 */
}

参考资料：
• jQuery：
• CSS:
好的，这是代码

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

$（“#添加”）。单击（函数（）{
event.preventDefault（）；
$（'tr'）.find（'td'）.each（function（）{
if（parseInt（$（this.text（）））
$（this.html）（parseInt（$（this.text（））+1）；
});
$（“#颜色列表”）。前缀（“1grey”）；
});

检查
确定这是代码

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

$（“#添加”）。单击（函数（）{
event.preventDefault（）；
$（'tr'）.find（'td'）.each（function（）{
if（parseInt（$（this.text（）））
$（this.html）（parseInt（$（this.text（））+1）；
});
$（“#颜色列表”）。前缀（“1grey”）；
});

---

选中

tr td:first child

应该是

td:first child

。我非常喜欢CSS选项anthony，是的；正如你所说的那样@向量：谢谢！=）

trtd:first child

应该是

td:first child

；正如你所说的那样@向量：谢谢！=）