Question

我正在尝试编写一个应用程序，其中我们有一个包含4行的HTML表格（为了简单起见）＆amp; 3列。

前两列是输入＆amp;第3个将显示乘以这些输入的结果（对于每一行），我希望最后一行中的第3列计算第3列中结果的总和。

我在想我需要编写一个JavaScript函数来迭代整个表，但我不确定的是如何标记输入 - 每个都需要不同吗？

<table width="80%" border="0">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Result</th>
    </tr>
    <tr>
        <td><input id="???" type="text" /></td>
        <td><input id="???" type="text" onchange="calculate()" /></td>
        <td><input id="result" /></td>
    </tr>
    <tr>
        <td><input id="???" type="text" /></td>
        <td><input id="???" type="text" onchange="calculate()" /></td>
        <td><input id="result" /></td>
    </tr>
    <tr>
        <td><input id="???" type="text" /></td>
        <td><input id="???" type="text" onchange="calculate()" /></td>
        <td><input id="result" /></td>
    </tr>
    <tr>
        <td><input id="???" type="text" /></td>
        <td><input id="???" type="text" onchange="calculate()" /></td>
        <td><input id="result" /></td>
    </tr>

</table>

Answer 1

首先，请提供您的ID名称。

您可以使用parseInt()来计算总和或乘法

var a = parseInt(document.getElementById("id-one").value);
var b = parseInt(document.getElementById("id-two").value);
var sum = a+b;
var mul = a*b;

Answer 2

不要将内联HTML用于javascript。而是创建一个选择器，如：

$('table input').change(function() { }

您可以在函数内使用$(this)来操纵当前输入已更改。

Answer 3

无需设置ID。使用jquery，我会尝试类似的东西：

function calculate() {
    var tr = $(this).closest("tr");
    var inputs = tr.find("input");
    var input1 = $(inputs[0]);
    var input2 = $(inputs[1]);
    var resultInput = $(inputs[2]);
    resultInput.val(+input1.val()+input2.val()); // +input1.val() is cast input1 to number
}

输入和输出的乘法;使用JavaScript的输入总和

3 个答案: