Javascript onblur="；功能（本）“；不适用于多个动态创建的文本框

我有三个文本框。包括零售价格、数量和总金额。每当我在文本框中输入零售价格和数量时，零售价格和数量的值应自动相乘，并保存到总金额文本框中。问题是我的代码只工作一次，但当动态添加文本框时，onblur=“cal（this）”就不起作用了。我希望单个onblur=“cal（this）”函数可以多次工作。给出解决方案

引导3表格

---

您的问题主要是javascript按id查找元素，因此它得到的是DOM上具有该id的第一个元素。实际上，javascript正在使用这些id在第一个元素上运行

在文档元素上重复ID不是一个好模式。即使如此，您也应该查找onblur上的兄弟元素，而不是那些具有固定id的元素

使用

querySelector

和一些按类名的css选择器可能是更好的代码，比如在这些元素上添加一个类，这样您也可以使用它来设置该文档上所有元素的样式，或者如果您像这样保留它，请使用属性选择器

功能校准（\u输入）
{
const thisIsTD=\u input.parentElement；
const thisIsTR=thisIsTD.parentElement；
var first=thisIsTR.querySelector（'[name=quantity]'）。值；
var second=thisIsTR.querySelector（'[name=retail_price]'）。value；
thisIsTR.querySelector（'[name=amount]'）。value=parseFloat（parseInt（first）*parseInt（second））。toFixed（3）；
}
函数验证（事件）{return true；}

---

@jmtalarn给出了正确的答案，我只是想展示如何使用DOM

因为，在更改布局时，必须更改代码，这可以通过使用函数

findAncestor

避免

函数findAncestor（el，sel）{
while（（el=el.parentElement）和&！（（el.matches | | el.matchesSelector）.call（el，sel））；
返回el；
}
函数cal（intputElement）
{
让row=findAncestor（intputElement，'tr'）；
让first=row.querySelector（'[name=quantity]'）.value；
let second=row.querySelector（'[name=retail_price]'）。value；
让结果=parseFloat（parseInt（第一个）*parseInt（第二个））；
如果（结果）{
row.querySelector（'[name=amount]'）。value=result.toFixed（3）；
}否则{
//显示错误
}
}
函数验证（事件）{return true；}

我已经试过了，而且效果很好。可能错误在你说的“动态添加文本框时”部分。你能添加你如何添加动态文本框吗？你甚至不使用

\u输入

  <td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
     readonly="true" onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
</td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>

function cal(_input)
{
    var first = document.getElementById('quantity').value;
    var second = document.getElementById('retail_price').value; 
    document.getElementById('amount').value = parseFloat(parseInt(first)*parseInt(second)).toFixed(3);

   }