將兩項相乘並在第三項中自行生成結果

Question

當我將兩項相乘時，結果會在第三個輸入框中生成，但是問題是，當我在單擊添加按鈕上再添加一行時，這種相乘無法正常工作。下一個.........請幫助我，因為這是我的項目中創建的問題，我的工作是停止HTML

 var maxID = 0; function getTemplateRow() { var x = document.getElementById("templateRow").cloneNode(true); x.id = ""; x.style.display = ""; x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID); return x; } function addRow(btn) { var t = document.getElementById("theTable"); var rows = t.getElementsByTagName("tr"); var r = rows[rows.length - 1]; r.parentNode.insertBefore(getTemplateRow(), r); } function update(){ var price = document.getElementById("Uprice").value; var quantity = document.getElementById("quantity").value; var Tprice = price * quantity ; document.getElementById("Totprice").value = Tprice; } function removeRow(btn) { var row = btn.parentNode.parentNode; row.parentNode.removeChild(row); } 

 th{ border: 3px 3px 3px 3px green; position: relative; background-color: green; color: white; width: 300px; } 

 <table id="theTable"> <tr> <th>id</th> <th>name</th> <th>id</th> <th>name</th> <th>id</th> <th>name</th> <th>id</th> <th>name</th> <th>name</th> </tr> <tr> <td><input type="" name=""></td> <td><input type="" name=""></td> <td><input type="" name=""></td> <td><input type="" name=""></td> <td><input type="" name=""></td> <td><input type="" name=""></td> </tr> <button onclick="addRow();">add</button> <tr id="templateRow" style="display:none;"> <!--<td>{id}</td>--> <td><input /></td> <td><input type="" name=""> <!--<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>--> </td> <td><input id = "Uprice"/></td> <td><input id = "quantity" onChange="update()"/></td> <td><input id = "Totprice" readonly=""/></td> <td><input /></td> <td><input /></td> <td><input /></td> <td><button onclick="removeRow(this);">delete</button></td> </tr> </table> 

Answer 1

問題是更新功能綁定到當前的DOM元素，而不綁定到新的DOM元素。 因此，將update function重新綁定到新添加的元素。

To do that you can simply reinitialize your update function and call it as per your appropriate trigger or you can even destroy it and reinitialize it but make sure you have your triggers in proper place 。

Answer 2

id應該是唯一的。 因此，如果存在多個相同的ID（在這種情況下為Uprice，數量，Totprice和templateRow），則只有第一個有效。

因此，您可以將id更改為class和getElementByClassName，然后將執行所有具有classname的項。 那應該工作。