动态添加行后脚本不起作用

Question

I have one function which calculates the total amount. amount=qty*rate

Here is my html code for showing table

When I add new row it doesn't trigger that calculate function

Can any one help me out?

Here is my script:

 function calculate() { var myBox1 = document.getElementById('qty').value; var myBox2 = document.getElementById('rate').value; var amnt = document.getElementById('amnt'); var myResult = myBox1 * myBox2; amnt.value = myResult; } var count = "1"; function addRow(in_tbl_name) { var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; // create row var row = document.createElement("TR"); // create table cell 1 var td1 = document.createElement("TD") var strHtml1 = "<INPUT TYPE=\\"text\\" NAME=\\"r_name\\" SIZE=\\"30\\">"; td1.innerHTML = strHtml1.replace(/!count!/g,count); // create table cell 2 var td2 = document.createElement("TD") var strHtml2 = "<INPUT TYPE=\\"text\\" NAME=\\"r_desc\\" PLACEHOLDER=\\"description\\" SIZE=\\"30\\">"; td2.innerHTML = strHtml2.replace(/!count!/g,count); // create table cell 3 var td3 = document.createElement("TD") var strHtml3 = "<INPUT TYPE=\\"text\\" NAME=\\"r_qty\\" PLACEHOLDER=\\"QTY\\" ID=\\"qty\\" ONINPUT=\\"calculate()\\" SIZE=\\"30\\">"; td3.innerHTML = strHtml3.replace(/!count!/g,count); // create table cell 4 var td4 = document.createElement("TD") var strHtml4 = "<INPUT TYPE=\\"text\\" NAME=\\"r_RATE\\" PLACEHOLDER=\\"rate\\" ID=\\"rate\\" ONINPUT=\\"calculate()\\" SIZE=\\"30\\">"; td4.innerHTML = strHtml4.replace(/!count!/g,count); // create table cell 5 var td5 = document.createElement("TD") var strHtml5 = "<INPUT TYPE=\\"text\\" NAME=\\"r_total\\" PLACEHOLDER=\\"amount\\" ID=\\"amnt\\" >"; td5.innerHTML = strHtml5.replace(/!count!/g,count); // create table cell 4 var td6 = document.createElement("TD") var strHtml6 = "<INPUT TYPE=\\"Button\\" CLASS=\\"Button\\" onClick=\\"delRow()\\" VALUE=\\"Delete Row\\">"; td6.innerHTML = strHtml6.replace(/!count!/g,count); // append data to row row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); row.appendChild(td5); row.appendChild(td6); // add to count variable count = parseInt(count) + 1; // append row to table tbody.appendChild(row); } function delRow() { var current = window.event.srcElement; //here we will delete the line while ( (current = current.parentElement) && current.tagName !="TR"); current.parentElement.removeChild(current); } 

 <TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;"> <tr> <th><center>Row material Name</center></th> <th><center>Description</center></th> <th><center>Qty.</center></th> <th><center>Rate</center></th> <th><center>Amount</center></th> <th><center><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th> </tr> <tr> <th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_desc" PLACEHOLDER="description" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_qty" PLACEHOLDER="QTY" ID="qty" ONINPUT="calculate()" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_RATE" PLACEHOLDER="rate" ID="rate" ONINPUT="calculate()" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_total" PLACEHOLDER="amount" ID="amnt" ></center></th> <th><center></center></th> </tr> </TABLE> 

Here is my HTML code

Answer 1

I understand now what you wanted to do.

You're using the same element id multiple times, so your calculate() function always selects only the first inputs in the first row.

I calculate() so it takes as a parameter the element that triggered the event and then traverses up the DOM tree to find the closest <tr> :

var tr = elm;
while ((tr = tr.parentElement) && tr.tagName !== 'TR');

Then select input fields only in this table row, calculate what you want and set it as a value to another input field in the same row.

Last thing I changes is that I trigger oninput with oninput=calculate(this) where this is the current DOM element.

 function calculate(elm) { var tr = elm; while ((tr = tr.parentElement) && tr.tagName !== 'TR'); var inputs = tr.querySelectorAll('input'); var myBox1 = inputs[2].value; var myBox2 = inputs[3].value; var myResult = myBox1 * myBox2; inputs[4].value = myResult; } var count = "1"; function addRow(in_tbl_name) { var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; // create row var row = document.createElement("TR"); // create table cell 1 var td1 = document.createElement("TD") var strHtml1 = "<INPUT TYPE=\\"text\\" NAME=\\"r_name\\" SIZE=\\"30\\">"; td1.innerHTML = strHtml1.replace(/!count!/g,count); // create table cell 2 var td2 = document.createElement("TD") var strHtml2 = "<INPUT TYPE=\\"text\\" NAME=\\"r_desc\\" PLACEHOLDER=\\"description\\" SIZE=\\"30\\">"; td2.innerHTML = strHtml2.replace(/!count!/g,count); // create table cell 3 var td3 = document.createElement("TD") var strHtml3 = "<INPUT TYPE=\\"text\\" NAME=\\"r_qty\\" PLACEHOLDER=\\"QTY\\" ID=\\"qty\\" ONINPUT=\\"calculate(this)\\" SIZE=\\"30\\">"; td3.innerHTML = strHtml3.replace(/!count!/g,count); // create table cell 4 var td4 = document.createElement("TD") var strHtml4 = "<INPUT TYPE=\\"text\\" NAME=\\"r_RATE\\" PLACEHOLDER=\\"rate\\" ID=\\"rate\\" ONINPUT=\\"calculate(this)\\" SIZE=\\"30\\">"; td4.innerHTML = strHtml4.replace(/!count!/g,count); // create table cell 5 var td5 = document.createElement("TD") var strHtml5 = "<INPUT TYPE=\\"text\\" NAME=\\"r_total\\" PLACEHOLDER=\\"amount\\" ID=\\"amnt\\" >"; td5.innerHTML = strHtml5.replace(/!count!/g,count); // create table cell 4 var td6 = document.createElement("TD") var strHtml6 = "<INPUT TYPE=\\"Button\\" CLASS=\\"Button\\" onClick=\\"delRow()\\" VALUE=\\"Delete Row\\">"; td6.innerHTML = strHtml6.replace(/!count!/g,count); // append data to row row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); row.appendChild(td5); row.appendChild(td6); // add to count variable count = parseInt(count) + 1; // append row to table tbody.appendChild(row); } function delRow() { var current = window.event.srcElement; //here we will delete the line while ( (current = current.parentElement) && current.tagName !="TR"); current.parentElement.removeChild(current); } 

 <TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;"> <tr> <th><center>Row material Name</center></th> <th><center>Description</center></th> <th><center>Qty.</center></th> <th><center>Rate</center></th> <th><center>Amount</center></th> <th><center><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></center></th> </tr> <tr> <th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_desc" PLACEHOLDER="description" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_qty" PLACEHOLDER="QTY" ID="qty" ONINPUT="calculate(this)" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_RATE" PLACEHOLDER="rate" ID="rate" ONINPUT="calculate(this)" SIZE="30"></center></th> <th><center><INPUT TYPE="text" NAME="r_total" PLACEHOLDER="amount" ID="amnt" ></center></th> <th><center></center></th> </tr> </TABLE>