使用 JQuery 将动态创建的输入字段中的值相乘

Use JQuery to multiply values from dynamically created input fields

本文关键字：字段 输入 动态 创建 使用 JQuery      更新时间：2023-09-26

我正在使用JQuery动态创建表行。每行包含 3 个文本字段。当用户在文本字段中键入内容时，将克隆表行，并根据需要添加多行。 一切正常。

数值输入到前 2 个字段中，这些字段相乘。输出将自动显示在第三个文本框中。由于输入字段是克隆的，我不能使用 getElementById 来运行函数并乘以值。

我被告知使用onchange使用父母兄弟姐妹，但我不知道该怎么做。有人可以给我举个例子吗？

这是我在 JS Fiddle 中的代码示例： https://jsfiddle.net/mzctb778/

由于您正在动态添加内容，因此应使用事件委派来侦听更改事件。通过将其附加到表来执行此操作。因此，请监听输入的变化。检测到更改后，通过查找 DOM 并选择需要相乘的输入来获取行。由于不能使用 id，因为它们必须是唯一的，因此请使用类来引用元素。

$("table").on("change", "input", function () {  //use event delegation
  var tableRow = $(this).closest("tr");  //from input find row
  var one = Number(tableRow.find(".one").val());  //get first textbox
  var two = Number(tableRow.find(".two").val());  //get second textbox
  var total = one * two;  //calculate total
  tableRow.find(".three").val(total);  //set value
});
$("button.add").on("click", function() {
   var tbody = $("table tbody");
   tbody.find("tr:eq(0)").clone().appendTo(tbody).find("input").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td><input class="one" /></td>
      <td><input class="two" /></td>
      <td><input class="three" readonly="readonly"/></td>
    </tr>
  </tbody>
</table>
<button class="add">Add</button>

将其添加到您的脚本中，它将执行您想要的计算：

$("table select").on("change", function(){
var x=$(this).find(":selected").val();
var y=$(this).closest("td").siblings().find(":selected").val();
$(this).closest("td").siblings().find("input").val(x*y);
});

新 JS 小提琴

相关文章：