如何创建将DOM属性添加到属性的JavaScript循环？

我有一个表格，其中的单元格不可编辑。然而，使用JavaScript循环或函数，我想让它们这样做

我知道手动为每个单元格执行此操作非常简单，对于只有几个单元格的表来说，这可能会更容易，但我希望使用循环/函数加快此过程，因为该表可能会变得更大，手动将每个单元格设置为可编辑的时间将非常繁琐

下面是一个显示当前不可编辑的表格计算器的快速示例。但是使用循环或函数，我希望在DOM中将右侧列中的每个单元格设置为

。contentEditable=true

。我想象这些参数看起来像

（var I=0；l！=rows.length；I

，但我正在努力研究参数后面的语句必须是什么才能使循环/函数工作。任何帮助都将不胜感激

函数myFunction（）{
var jack2=document.getElementById（“jack”）.innerText；
var john2=document.getElementById（“john”）.innerText；
var joe2=document.getElementById（“joe”）.innerText；
var total2=（parseInt（jack2）| | 0）+（parseInt（john2）| | 0）+（parseInt（joe2）| | 0）；
document.getElementById（“total”）.innerHTML=total2；
}

表格{
宽度：100%；
}
桌子
tr，
th，
运输署{
边框：1px纯色灰色；
边界塌陷：塌陷；
字体系列：Arial；
保证金：5px；
}

重量计算器
人
重量（千克）
杰克
1.
约翰
2.
乔
3.
全部的

您可以选择整个表，然后使用querySelectorAll获取所有行，然后针对每行更改第二个td的可编辑内容，如下所示

let table=document.getElementById（'table'））
让rows=table.querySelectorAll（'tr'）
rows.forEach（row=>{
设tds=row.querySelectorAll（'td'））
//行中的所有单元格
如果（tds.length>0）{//如果它不是标头
tds[1]。contentEditable=true
//将内容更改为可编辑
}
})

（如果有多个表，则需要向表中添加id）

...

获取选项卡中具有左邻域的所有单元格（页眉不受影响，因为有th而没有td）。将属性添加到每个单元格中。

已编辑：为获取总和，请在每个td上添加一个eventlistener，如果内容发生更改，它将调用calc函数

函数myFunction（）{
让weightcell=document.queryselectoral（“表tr:not（：last child）td~td”）；
forEach（td=>{
td.setAttribute（'contentEditable'，true）；
td.addEventListener（“更改”，calcSum（））；
});
}
函数calcSum（）{
设和=0；
让weightcell=document.querySelectorAll（“table tr td~td”）；
让计数=权重单元格。长度-1；
对于（i=0；这很好，但它也可以使最后的单元格可编辑。有没有办法解决这个问题？是的，你可以解决这个问题。看我的答案。选择器可以稍微扩展一点。