У меня есть таблица с ячейками, отличными от contentEditable
. Однако, используя JavaScript l oop или функцию, я хотел бы сделать их такими.
Я понимаю, что это очень просто сделать вручную для каждой ячейки, и, вероятно, это будет проще для таблица с несколькими ячейками, но я хотел бы ускорить этот процесс с помощью цикла / функции, чтобы таблица могла стать намного больше, а время, потраченное вручную на установку каждой ячейки как contentEditable, было бы утомительным.
Ниже приведен быстрый пример табличного калькулятора, который в настоящее время нельзя редактировать. Но, используя al oop или функцию, я хотел бы установить для каждой ячейки в правом столбце значение .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>