提问人：ttoshiro 提问时间：8/2/2020 更新时间：8/2/2020 访问量：67
如何创建一个将DOM属性添加到属性的JavaScript循环？
How to create a JavaScript loop that adds DOM properties to attributes?
问：
我有一个表格，其中的单元格不是 .但是，使用 JavaScript 循环或函数，我想使它们如此。contentEditable
我知道为每个单元格手动执行此操作非常简单，对于只有几个单元格的表格来说，这可能会更容易，但我想通过表格的循环/函数来加快此过程，并且手动将每个单元格设置为contentEditable所花费的时间会很乏味。
下面是一个显示表格计算器的快速示例，目前不可编辑。但是使用循环或函数，我想将右列中的每个单元格都设置为 DOM 中。我想参数看起来像 ，但我正在努力解决参数后面的语句必须是什么才能使循环/函数正常工作。任何帮助将不胜感激！.contentEditable = true(var i = 0; l != rows.length; i < l; i+2)
function 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;
}table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid gray;
border-collapse: collapse;
font-family: Arial;
margin: 5px;
}<table>
<caption>Weight Calculator</caption>
<tr class="cell">
<th>Person</th>
<th>Weight (kg)</th>
</tr>
<tr class="cell">
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr class="cell">
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr class="cell">
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr class="cell">
<td>Total</td>
<td id="total"></td>
</tr>
</table>答：
1赞
gui3
8/2/2020
#1
您可以选择整个表，然后使用 querySelectorAll 获取所有行，然后为每一行更改第二个 td 的 contenteditable，如下所示
let table = document.getElementById('table')
let rows = table.querySelectorAll('tr')
rows.forEach(row => {
let tds = row.querySelectorAll('td')
// all the cells of the row
if (tds.length > 0) { // if it is not the header
tds[1].contentEditable = true
// change the contenteditable
}
})
（如果您有多个表，则需要向表中添加一个 ID）
<table id="table">
...
</table>
评论
0赞
ttoshiro
8/2/2020
这很好，但它也使最终单元格可编辑。有没有办法解决这个问题？
1赞
Sascha
8/2/2020
是的，你可以解决这个问题，看看我的答案。选择器可以稍微扩展一下。
1赞
Sascha
8/2/2020
#2
获取表中所有具有左邻位的单元格（标头不受影响，因为有 th 而不是 td）。向每个单元格添加您的属性。
已编辑：为了获取总和，请在每个 td 上添加一个 eventlistener，如果内容发生变化，该 td 将调用 calc-function。
function myFunction() {
let weightCells = document.querySelectorAll("table tr:not(:last-child) td ~ td");
weightCells.forEach(td => {
td.setAttribute('contentEditable', true);
td.addEventListener ("change", calcSum());
});
}
function calcSum() {
let sum=0;
let weightCells = document.querySelectorAll("table tr td ~ td");
let count = weightCells.length-1;
for (i=0; i<count; i++) {
sum += parseInt(weightCells[i].innerHTML) || 0;
}
weightCells[count].innerHTML = sum;
}
myFunction();table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid gray;
border-collapse: collapse;
font-family: Arial;
margin: 5px;
}<table>
<caption>Weight Calculator</caption>
<tr class="cell">
<th>Person</th>
<th>Weight (kg)</th>
</tr>
<tr class="cell">
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr class="cell">
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr class="cell">
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr class="cell">
<td>Total</td>
<td id="total"></td>
</tr>
</table>
评论