从HTML单元格值创建JS数组？
[英]Create JS array from HTML cell values?
问题描述
我是HTML和Java脚本的新手，我设法根据需要创建表和滑块。 但是我希望脚本具有通用性，因此可以将其用于具有不同值和更多或更少行的其他表。 我认为这意味着必须根据行数及其值创建一个数组？
任何帮助将不胜感激！
<html> <body onload="myFunction()"> <table> <tr> <td>value one</td> <td id="value1">0.5</td> </tr> <tr> <td>value two</td> <td id="value2">5</td> </tr> <tr> <td>value three</td> <td id="value3">2</td> </tr> </table> <form id="myForm"> <input type="range" id="myRange" defaultvalue="1" value="1" min="0.1" max="2" step="0.1" onclick="myFunction()"> <input type="button" onclick="myReset();myFunction()" value="Reset"> </form> <script> function myReset() { document.getElementById("myForm").reset(); } function myFunction() { var x = document.getElementById("myRange").value; var value1 = 0.5 * x; //entered values manually as I don't know how to retrieve from table cells var v1 = value1.toFixed(2); var value2 = 5 * x; var v2 = value2.toFixed(2); var value3 = 2 * x; var v3 = value3.toFixed(2); document.getElementById('value1').innerHTML = v1; document.getElementById('value2').innerHTML = v2; document.getElementById('value3').innerHTML = v3; } </script> </body> </html>
2 个解决方案
解决方案1
0 2017-05-24 23:02:16
棘手的部分是找到一种遍历元素的方法，在此当前解决方案中，假定元素的ID将从“ value1”开始增加。 自然地，如果您向每个元素添加一个类，则可以通过这种方式进行迭代，但这足以说明要点。
function myReset() { document.getElementById("myForm").reset(); } function myFunction() { var x = document.getElementById("myRange").value; var count = 1; var currentElem = document.getElementById("value" + count); while (currentElem) { var val = (currentElem.innerText * x).toFixed(2); currentElem.innerHTML = val; count++; currentElem = document.getElementById("value" + count); } }
<html> <body onload="myFunction()"> <table> <tr> <td>value one</td> <td class="table-val" id="value1">0.5</td> </tr> <tr> <td>value two</td> <td class="table-val" id="value2">5</td> </tr> <tr> <td>value three</td> <td class="table-val" id="value3">2</td> </tr> </table> <form id="myForm"> <input type="range" id="myRange" defaultvalue="1" value="1" min="0.1" max="2" step="0.1" onclick="myFunction()"> <input type="button" onclick="myReset();myFunction()" value="Reset"> </form> </body> </html>
解决方案2
0 已采纳 2017-05-24 23:11:10
如果为所有单元格提供相同的类，则可以使用.getElementsByClassName访问它们。 您还可以为单元格的属性分配一个值，然后使用.getAttribute访问它。
请以下面的代码段为例。
function myReset() { document.getElementById("myForm").reset(); } function myFunction() { var x = document.getElementById("myRange").value; var cells = document.getElementsByClassName("value-cell"); for(var cell of cells) { var value = cell.getAttribute('value'); cell.innerHTML = value * x; } }
<html> <body onload="myFunction()"> <table> <tr> <td>value one</td> <td class="value-cell" value="0.5"></td> </tr> <tr> <td>value two</td> <td class="value-cell" value="5"></td> </tr> <tr> <td>value three</td> <td class="value-cell" value="2"></td> </tr> </table> <form id="myForm"> <input type="range" id="myRange" defaultvalue="1" value="1" min="0.1" max="2" step="0.1" onclick="myFunction()"> <input type="button" onclick="myReset(); myFunction()" value="Reset"> </form> </body> </html>
使用.getAttribute的替代方法是将隐藏的输入放在单元格内，然后在其中存储值，然后使用input.value进行访问。
您还可以使用jQuery并简化整个过程。
JS-PHP-根据特定HTML标记的值构建数据数组
[英]JS - PHP - Build an Array of Data From the Values of a Specific HTML Tag
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.