Question

我是编码新手，然后任何帮助都会非常感激。

我试图从2值进行自动乘法。基本上我的表格看起来像this。乘法在第一行完美运行。如果我通过简单地复制此代码来创建另一行：

<tr>
   <td><input id="box1" type="text" oninput="calculate()" /></td>
   <td><input id="box2" type="text" oninput="calculate()" /></td>
   <td><input id="result" /></td>
</tr>

然后第二排不起作用。这可能是因为第二行的id与第一行完全相同。但是，如果我更改id，脚本也无法正常工作。你能告诉我如何解决它吗？

编辑：我将此脚本用于乘法目的：

function calculate() {
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value;
    var result = document.getElementById('result'); 
    var myResult = myBox1 * myBox2;
    result.value = myResult;
    }

Answer 1

我会将一个input事件处理程序绑定到表中，该表将捕获任何表格单元格上的任何input事件。输入元素。处理程序event.target中将引用事件源自的输入元素，您可以使用DOM导航属性/方法在同一行中查找关联的表格单元格。

使用class代替id：

可能有点像这样

＆＃13;

document.getElementById("multiplier").addEventListener("input", function(e) {
  var row = e.target.parentNode.parentNode
  var val1 = row.querySelector(".valOne").value
  var val2 = row.querySelector(".valTwo").value
  row.querySelector(".result").value = val1 * val2
})

＆＃13;

<table id="multiplier">
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
<tr>
   <td><input class="valOne" type="text" /></td>
   <td><input class="valTwo" type="text" /></td>
   <td><input class="result" /></td>
</tr>
</table>

＆＃13;

进一步阅读：

最好使用e.target.closest("tr")代替e.target.parentNode.parentNode，但请注意，IE中不支持.closest() method，因此您需要使用polyfill }。

请注意，我已经显示的JS需要位于在表之后的脚本元素中（例如，在关闭之前的正文末尾{{1}你需要将它包装在文档加载或DOMContentLoaded处理程序中。

多行自动乘法

1 个答案: