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

时间:2014-01-20 11:53:10

标签: javascript html-table

我正在尝试编写一个应用程序,其中我们有一个包含4行的HTML表格(为了简单起见)& 3列。

前两列是输入&第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>

3 个答案:

答案 0 :(得分:0)

首先,请提供您的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;

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

无需设置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
}