javascript - 如何创建一个将 DOM 属性添加到属性的 JavaScript 循环?
问题描述
我有一个表格,其中的单元格不是contentEditable
. 但是,使用 JavaScript 循环或函数,我想这样做。
我知道为每个单元格手动执行此操作非常简单,对于只有几个单元格的表格来说这可能会更容易,但我想通过表格的循环/函数来加快这个过程可能会变得更大,并且手动将每个单元格设置为 contentEditable 所花费的时间会很乏味。
下面是一个显示表格计算器的快速示例,目前无法编辑。但是使用循环或函数,我想将右列中的每个单元格设置为.contentEditable = true
DOM 中。我想参数看起来像(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>
解决方案
获取表格中具有左邻居的所有单元格(标题不受影响,因为有 th 而不是 td)。将您的属性添加到每个单元格中。
编辑:为了获取总数,在每个 td 上添加一个事件监听器,如果内容发生变化,它会调用 calc 函数。
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>
推荐阅读
- kubernetes - Koustomize.yaml 有什么用?
- svg - 为什么 SVG 笔画是半透明的
- r - 闪亮的应用程序中的ggplotly工具栏位置
- c# - Photon Pun 2 用鼠标改变位置
- arp - 本地网络上的 TCP 套接字安全性
- list - 在 Haskell 中将 0-s 添加到直到长度为 8 的列表中
- javascript - 没有可用的 FullCalendar 视图插件
- flutter - Flutter 显示 ListView 顶部的渐变 Divider
- git - Git 从 master 以外的不同分支远程拉取
- php - 使用 php-di 在 slim 4 中集成学说