将第三个

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元素但不是新元素。 因此，将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。