Javascript-使用动态文本输入垂直和水平执行操作

需要帮助我正在处理一些文本输入，这些文本输入是动态的，取决于用户输入的数量。我想做的是使用onkeyup javascript在用户输入值之后自动计算文本输入。 下面是php和html代码：

<?Php

$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
    echo "<input type='text' onkeyup='multiply()' id='tb1'>";
    echo "x";
    echo "<input type='text' onkeyup='multiply()' id='tb2'>";
    echo "=";
    echo "<input type='text' onkeyup='multiply()' id='tb3'>";
    echo "<br>";
}

?>

total:<input type='text' onkeyup='multiply()' id='tb4'>

---

所有行都包含具有相同ID的元素。因此，第1行将包含ID为tb1、tb2、tb3的元素。第2行还将包含ID为tb1、tb2和tb3的元素

页面上每个元素的id都必须是唯一的。通过将行号附加到id，可以使id唯一。例如：

<?php

$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-1'>";
    echo "x";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-2'>";
    echo "=";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-3'>";
    echo "<br>";
}

?>

Total: <input type='text' id='tb4'> <input type='button' onclick='CalculateSum()' title='Calculate Sum'>

---

我将从这里开始：更改呈现的HTML，使每一行都在
或某种容器中输出。然后，在输入上输入一个类名，比如“number1”、“number2”和“answer”，而不是使用id。然后，在
multiply
函数中，使用功能更强大的
文档。querySelectorAll
从触发事件的输入向上遍历到容器，然后再次使用此函数，按类名（“number1”、“number2”等）查找每个子级。然后，您可以执行其余的计算和更新。这将消除所有硬编码的ID。这可能是因为您正在复制ID的。。。您可能需要将
ID
交换为
类
，并迭代
类
组ᴏ你的回答中有一些我不明白的地方，我如何才能将每个div声明为行？你是说我需要把css放在上面吗？？最后一个问题，先生@Nadir，我怎样才能得到tb3的总数并在tb4中显示出来
<?php

$x = 10;
$i = 0;
for($i=0; $i<$x; $i++){
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-1'>";
    echo "x";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-2'>";
    echo "=";
    echo "<input type='text' onkeyup='multiply(" . $i . ")' id='tb" . $i . "-3'>";
    echo "<br>";
}

?>

Total: <input type='text' id='tb4'> <input type='button' onclick='CalculateSum()' title='Calculate Sum'>

<script>
    function multiply(row) {
        var textbox1 = document.getElementById('tb' + row + '-1').value;
        var textbox2 = document.getElementById('tb' + row + '-2').value;
        var result = parseFloat(textbox1) * parseFloat(textbox2);
        if(!isNaN(result))
        {
            document.getElementById('tb' + row + '-3').value = result;
        }
    }

    function CalculateSum() {
        let total = 0;
        for (let i=0; i < 10; i++) {
            total += document.getElementById('tb' + i + '-3').value;
        }
        document.getElementById('tb4').value = total; 
    }
</script>