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

2 个答案: