Сценарий не работает после динамического добавления строки

У меня есть одна функция, которая вычисляет общую сумму. сумма = кол-во * СкоростьСценарий не работает после динамического добавления строки

Вот мой HTML-код для отображения таблицы

При добавлении новой строки она не вызывает, рассчитывающие функцию

Может ли один помочь мне?

Вот мой сценарий:


 
function calculate() { 
 
\t \t var myBox1 = document.getElementById('qty').value; \t 
 
\t \t var myBox2 = document.getElementById('rate').value; 
 
\t \t var amnt = document.getElementById('amnt'); \t 
 
\t \t var myResult = myBox1 * myBox2; 
 
\t \t amnt.value = myResult; 
 
     } 
 
\t \t 
 
    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\" >"; 
 
\t 
 
    td5.innerHTML = strHtml5.replace(/!count!/g,count); 
 
\t // create table cell 4 
 
    var td6 = document.createElement("TD") 
 
    var strHtml6 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">"; 
 
\t 
 
    td6.innerHTML = strHtml6.replace(/!count!/g,count); 
 
\t 
 
    // append data to row 
 
    row.appendChild(td1); 
 
    row.appendChild(td2); 
 
    row.appendChild(td3); 
 
    row.appendChild(td4); 
 
    row.appendChild(td5); 
 
\t 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> 
 
\t \t \t <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> 
 

 
\t \t \t 
 
\t \t \t 
 
     </tr> 
 
\t \t <tr> 
 
    
 
      <th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th> 
 
\t \t \t <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> 
 

 
\t \t \t 
 
\t \t \t 
 
     </tr> 
 
</TABLE>

Вот мой HTML код

источник

2016-02-23 Sannidhi Bhadarka

Вы звоните 'Calculate()' 'только в oninput' случае, а не непосредственно в' addRow() 'функция – martin

@Martin вы можете дать мне подробное решение –

Я обновил свой ответить – martin

теперь я понимаю, что вы хотите сделать.

Вы используете один и тот же элемент id несколько раз, поэтому ваша функция calculate() всегда выбирает только первые входы в первой строке.

Я calculate() поэтому он принимает в качестве параметра элемент, который вызвал событие, а затем проходит вверх по дереву DOM, чтобы найти ближайший <tr>:

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

Затем выберите поля ввода только в этой строке таблицы, вычислить, что вы хотите и установите его как значение для другого поля ввода в той же строке.

Последнее, что я меняю, это то, что я вызываю oninput с oninput=calculate(this), где this - текущий элемент DOM.


 
function calculate(elm) { 
 
    var tr = elm; 
 
    while ((tr = tr.parentElement) && tr.tagName !== 'TR'); 
 
    var inputs = tr.querySelectorAll('input'); 
 

 
    var myBox1 = inputs[2].value; \t 
 
    var myBox2 = inputs[3].value; 
 
    var myResult = myBox1 * myBox2; 
 
    inputs[4].value = myResult; 
 
} 
 
\t \t 
 
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\" >"; 
 
\t 
 
    td5.innerHTML = strHtml5.replace(/!count!/g,count); 
 
\t // create table cell 4 
 
    var td6 = document.createElement("TD") 
 
    var strHtml6 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">"; 
 
\t 
 
    td6.innerHTML = strHtml6.replace(/!count!/g,count); 
 
\t 
 
    // append data to row 
 
    row.appendChild(td1); 
 
    row.appendChild(td2); 
 
    row.appendChild(td3); 
 
    row.appendChild(td4); 
 
    row.appendChild(td5); 
 
\t 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> 
 
\t \t \t <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> 
 

 
\t \t \t 
 
\t \t \t 
 
     </tr> 
 
\t \t <tr> 
 
    
 
      <th><center><INPUT TYPE="text" NAME="r_name" SIZE="30"></center></th> 
 
\t \t \t <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> 
 

 
\t \t \t 
 
\t \t \t 
 
     </tr> 
 
</TABLE>

источник

2016-02-23 09:38:46 martin

спасибо :) большую работу –

может у меня скрипт для определения элемента HTML для <выберите имя = "i_name []"> \t \t \t \t \t \t \t \t '. $ Row1 [ 'itm_name'] «. ';}?> \t –

Сценарий не работает после динамического добавления строки

ответ

Смежные вопросы