如何为 javascript 中的每个 td 元素自动添加递增数字 ID

Question

我希望javascript为我的每个 td 元素自动添加一个递增的数字 ID。

我想要每个 HTML 页面底部的脚本来告知将为该页面输入的第一个 ID 和 ++ 自动为每个下一个 td 元素输入。我用 for 循环尝试了很多东西，但我的 appendChild 方法缺少了一些东西，我只是无法让它工作，但我知道我快到了。

如果有人能伸出援手，将不胜感激！

以下是每个月手动输入这些 ID 的方法：

<tr>
    <td id="603" class="offweekend"></td>
    <td id="604" class="offmonth"></td>
    <td id="605" class="offmonth"></td>
    <td id="606" class="offmonth"></td>
    <td id="607" class="offmonth"></td>
    <td id="608" class="offmonth"></td>
    <td id="609" class="weekend">1</td>
</tr>

<script>
       tds = document.getElementsByTagName("td");
        tdlength = tds.length;
        firsttd = 603;
        lasttd = firsttd + tdlength;
        for (i = firsttd; i < lasttd; i++){
            td.appendChild() //???That's where i'm confused, i'm i wrong 
                                  with this approach?
        }
</script>   

//Thank you, i'm still learning :)

Answer 1

您不需要使用 appendChild。您可以简单地遍历单元格并立即设置 id。

let id = 603;
const cells = document.querySelectorAll('td');
cells.forEach(function(el) {
  el.id = id++;
});

旁白：我不知道您的预期用途，但您最好使用数据属性来存储此信息。

let id = 603;
const cells = document.querySelectorAll('td');
cells.forEach(function(el) {
  el.setAttribute('data-id', id++);
});

Answer 2

假设你有一个变量 firstValue 存储第一个 td 的 id 应该是什么，你可以使用这个：

document.querySelectorAll("td").forEach((v,i)=>v.id=i+firstValue);

querySelectorAll 按顺序获取所有 td 元素作为 NodeList。
v是td元素，i是元素在数组中的位置

如何为 javascript 中的每个 td 元素自动添加递增数字 ID

How to automaticaly add an incrementing numeric id for each td elements in javascript

html

javascript

html-table

auto-increment