Question

我是HTML和Javascript的新手，我设法创建表格和滑块我想要的方式。但是我希望脚本是通用的，因此它可以用于具有不同值和更多或更少行的其他表。我认为这意味着它必须根据行数及其值创建一个数组？

非常感谢任何帮助！

<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>

Answer 1

icky部分正在寻找迭代元素的方法，在当前的解决方案中，它假设元素将具有以＆＃34; value1＆＃34;开头的增加的ID。当然，如果你为每个元素添加一个类，你可以通过这种方式进行迭代，但这足以证明这一点。

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您为所有单元格提供相同的类，则可以使用.getElementsByClassName全部访问它们。您还可以为单元格的属性指定值，然后使用.getAttribute访问它。

请参阅下面的代码段作为示例。

＆＃13;

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;
    }
}

＆＃13;

<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>

＆＃13;

使用.getAttribute的替代方法是在单元格中放置hidden input并将值存储在那里，然后使用input.value访问它。

你也可以使用jQuery并使整个事情变得更清洁。

从HTML单元格值创建JS数组？

2 个答案: