如何使用 javascript 进行表计算和迭代？
[英]how to do table calculations and iterations with javascript?
问题描述
背景：我正在尝试学习 javascript，所以我决定尝试制作一个类似电子表格的东西来学习循环。 现在我已经断断续续地工作了一个多月，我真的可以使用一些额外的帮助。 由于我正在尝试学习 vanilla js，因此我试图远离其他任何事情。
到目前为止：我已经找到了计算行和整个表的不同解决方案，但我觉得这些解决方案中的任何一个都不是很好。 主要是我一直在为此使用for循环，但我注意到foreach可能会更好，我正在努力学习......所以现在我正在尝试理解嵌套的foreach循环。
问题：由于我要使用表格中不同位置的每个单元格的数据，我需要弄清楚如何将每一行与行的 rest 分开，然后分开该特定行中的每个单元格（用于计算列）。
解决方案：正如我所说，我有一些用于计算行甚至整个表的奇怪解决方案，但它们并没有真正回答我的问题。 一个想法，我在这里可能是非常错误的，是以某种方式将每一行变成一个数组。
我知道以前在这里问过类似的问题，并且我已经测试了其中的几个，但我仍然卡住了。
我已将所有代码放在下面的 fiddlejs 中。 该表设置为在更改时工作。
非常感谢任何形式的帮助
https://jsfiddle.net/mpv0ds5g/1/
HTML：
<body>
<div class="container">
<!-- FORM 1 -->
<form>
<table>
<caption>
<strong>FIRST</strong>
</caption>
<tbody>
<!-- ROW 0 -->
<tr>
<th scope="row">Row 0</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 1 -->
<tr>
<th scope="row">Row 1</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
</tbody>
</table>
</form>
<hr />
<!-- FORM 2 -->
<form>
<table>
<caption>
<strong>SECOND</strong>
</caption>
<tbody>
<!-- ROW 2 -->
<tr>
<th scope="row">Row 2</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 3 -->
<tr>
<th scope="row">Row 3</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 4 -->
<tr>
<th scope="row">Row 3</th>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="rowsum output">0</output></td>
</tr>
</tbody>
</table>
</form>
<hr />
<!-- FORM 3 -->
<form>
<table>
<caption>
<strong>THIRD</strong>
</caption>
<tbody>
<!-- ROW 4 -->
<tr>
<th scope="row">Row 4</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 5 -->
<tr>
<th scope="row">Row 5</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output class="rowsum output">0</output></td>
</tr>
</tbody>
</table>
</form>
<hr />
<!-- FORM 4 -->
<form>
<table>
<caption>
<strong>FOURTH</strong>
</caption>
<tbody>
<!-- ROW 6 -->
<tr>
<th scope="row">Row 6</th>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><input type="number" value="0" /></td>
<td><output></output></td>
</tr>
<!-- ROW 7 -->
<tr>
<th scope="row">Row 7</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output></output></td>
</tr>
<!-- ROW 8 -->
<tr>
<th scope="row">Row 8</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output></output></td>
</tr>
<!-- ROW 9 -->
<tr>
<th scope="row">Row 9</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output></output></td>
</tr>
</tbody>
</table>
</form>
<hr />
<!-- FORM 5 -->
<form>
<table>
<caption>
<strong>FIFTH</strong>
</caption>
<tbody>
<!-- ROW 10 -->
<tr>
<th scope="row">Row 10</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 11 -->
<tr>
<th scope="row">Row 11</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 12 -->
<tr>
<th scope="row">Row 12</th>
<td><output class="editTable output output">0</output></td>
<td><output class="editTable output output">0</output></td>
<td><output class="editTable output output">0</output></td>
<td><output class="editTable output output">0</output></td>
<td><output class="rowsum output output">0</output></td>
</tr>
<!-- ROW 13 -->
<tr>
<th scope="row">Row 13</th>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="editTable output">0</output></td>
<td><output class="rowsum output">0</output></td>
</tr>
<!-- ROW 14 -->
<tr>
<th scope="row">Row 14</th>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="colsum output">0</output></td>
<td><output class="rowsum output">0</output></td>
</tr>
</tbody>
</table>
</form>
</div>
<script src="/app.js"></script>
</body>
JS：
const forms = document.querySelectorAll("form");
forms.forEach(() => {
f0 = forms[0];
f1 = forms[1];
f2 = forms[2];
f3 = forms[3];
f4 = forms[4];
f0.onchange = editSheet;
f1.onchange = editSheet;
f2.onchange = editSheet;
f3.onchange = editSheet;
f4.onchange = editSheet;
});
function editSheet() {
const body = document.querySelectorAll("tbody");
const allrows = document.querySelectorAll("tr");
const input = document.querySelectorAll("input");
// unwanted for-loop. Gets the job done, but returns html-error in the console
for (i = 0; i < allrows.length; i++) {
rowTotal = 0;
for (ii = 0; ii < allrows[i].getElementsByTagName("input").length; ii++) {
rowTotal =
rowTotal + Number(allrows[i].getElementsByTagName("input")[ii].value);
}
allrows[i].querySelector(".rowsum").innerHTML = rowTotal;
}
/*
body.forEach(() => {
console.log(body[0]);
}); // gives every <tbody>
*/
/*
allrows.forEach((i, ix) => {
console.log(ix, i);
}); // gives every <tr>
*/
/*
input.forEach((i, ix) => {
console.log(ix, i.value);
}); // gives every value in the cells
*/
}
3 个解决方案
解决方案1
2 2020-08-15 23:42:07
一些表基础知识...
表格有保留字“行”和“单元格”，让生活更轻松。
单元格的内容可通过...访问
T.rows[x].cells[y].innerHTML
因此，要获得 [row 6, cell 4] 的值，我们 go...
var value = T.rows[6].cells[4].innerHTML; // "T" being the ID of the table.
要遍历表，我们 go...
for(var x=0; x<T.rows.length; x++){
T.rows[x].cells[3].innerHTML=5; // set the 3rd cell of every row to 5
}
现在通过每个单元格到 go 的嵌套循环......
for(var x=0; x<T.rows.length; x++){
for(var y=0; y<T.cells.length; y++){
T.rows[x].cells[y].innerHTML=0; // Initialise all cells with zero.
}
}
解决方案2
1 2020-08-15 23:47:37
第四个表没有行和为rowsum的元素。 这会导致错误，因为allrows[i].querySelector(".rowsum")返回null 。 反过来，这是因为没有要返回的rowsum元素。
至于循环本身，可以用.forEach调用替换for循环。
解决方案3
1 2020-08-16 00:18:01
我会做一些不同的事情。 我不会循环遍历每个表单中的每一行，而是使用event.target检测更改了哪个输入，然后通过 DOM “向上遍历”到父<tr> （通过parentElement ）并从中查询选择元素。
我认为代码是不言自明的。 我在editSheet()中添加了一些额外的变量，以便更清楚地了解正在发生的事情。
我还更改了您的forEach循环，因此它有点动态（添加或删除 forms 而无需更新代码）并且代码更少。
const forms = document.querySelectorAll("form"); forms.forEach((formElement) => { formElement.onchange = editSheet; /* f0 = forms[0]; f1 = forms[1]; f2 = forms[2]; f3 = forms[3]; f4 = forms[4]; f0.onchange = editSheet; f1.onchange = editSheet; f2.onchange = editSheet; f3.onchange = editSheet; f4.onchange = editSheet;*/ }); function editSheet(event) { const inputElement = event.target; // the input that sent the event const tableCellElement = inputElement.parentElement; // td const tableRowElement = tableCellElement.parentElement; // tr const tableCellElements = tableRowElement.querySelectorAll('input'); const outputElement = tableRowElement.querySelector('output'); let totalSum = 0; const DEFAULT_ZERO = 0; for (let i = 0; i < tableCellElements.length; i++) { totalSum += Number(tableCellElements[i].value) || DEFAULT_ZERO; } outputElement.value = totalSum; }
<div class="container"> <!-- FORM 1 --> <form> <table> <caption> <strong>FIRST</strong> </caption> <tbody> <!-- ROW 0 --> <tr> <th scope="row">Row 0</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 1 --> <tr> <th scope="row">Row 1</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> </tbody> </table> </form> <hr /> <!-- FORM 2 --> <form> <table> <caption> <strong>SECOND</strong> </caption> <tbody> <!-- ROW 2 --> <tr> <th scope="row">Row 2</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 3 --> <tr> <th scope="row">Row 3</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 4 --> <tr> <th scope="row">Row 3</th> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="rowsum output">0</output></td> </tr> </tbody> </table> </form> <hr /> <!-- FORM 3 --> <form> <table> <caption> <strong>THIRD</strong> </caption> <tbody> <!-- ROW 4 --> <tr> <th scope="row">Row 4</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 5 --> <tr> <th scope="row">Row 5</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output class="rowsum output">0</output></td> </tr> </tbody> </table> </form> <hr /> <!-- FORM 4 --> <form> <table> <caption> <strong>FOURTH</strong> </caption> <tbody> <!-- ROW 6 --> <tr> <th scope="row">Row 6</th> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><input type="number" value="0" /></td> <td><output></output></td> </tr> <!-- ROW 7 --> <tr> <th scope="row">Row 7</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output></output></td> </tr> <!-- ROW 8 --> <tr> <th scope="row">Row 8</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output></output></td> </tr> <!-- ROW 9 --> <tr> <th scope="row">Row 9</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output></output></td> </tr> </tbody> </table> </form> <hr /> <!-- FORM 5 --> <form> <table> <caption> <strong>FIFTH</strong> </caption> <tbody> <!-- ROW 10 --> <tr> <th scope="row">Row 10</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 11 --> <tr> <th scope="row">Row 11</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 12 --> <tr> <th scope="row">Row 12</th> <td><output class="editTable output output">0</output></td> <td><output class="editTable output output">0</output></td> <td><output class="editTable output output">0</output></td> <td><output class="editTable output output">0</output></td> <td><output class="rowsum output output">0</output></td> </tr> <!-- ROW 13 --> <tr> <th scope="row">Row 13</th> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="editTable output">0</output></td> <td><output class="rowsum output">0</output></td> </tr> <!-- ROW 14 --> <tr> <th scope="row">Row 14</th> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="colsum output">0</output></td> <td><output class="rowsum output">0</output></td> </tr> </tbody> </table> </form> <hr /> </div>
如何创建一个javascript表并从输入中获取计算作为表数据
[英]How to create a javascript table and get a calculations from input as table data
如何在 JavaScript 中创建一个执行 Sigma 符号计算的函数？
[英]How do you create a function that performs Sigma notation calculations in JavaScript?
如何做一个PHP循环的计算 <input> 与显示在JavaScript循环？
[英]how to do calculations of a php loop of <input> with displaying them in loop of javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.