Question

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

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

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

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

Answer 1

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

＆＃13;

$("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("");
});

＆＃13;

<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>

＆＃13;

Answer 2

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href ="style.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>

<body>



<div id="header-wrap">

<div id="header">
<div class="logo"><p>LOGO</p></div>
<div class="links"><p>VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT<p></div>
</div>
</div>
      

</body>
</html>

New JS Fiddle

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

2 个答案: