使用JavaScript的輸入乘法和輸入求和

Question

我正在嘗試編寫一個應用程序，其中我們有一個帶有4行（為簡單起見）和3列的HTML表。

前2列是輸入，第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
}