为动态创建的输入标签分配和更新值 - jquery
你好，我有最新的jquery，我有一个如下表，点击添加按钮我会附加一行输入，我想计算按键上每个特定（产品）的总价（即数量*价格=总价），我面临问题，因为我连续动态添加输入，请建议任何解决方案。
注意：想要使用 jquery/ javascript 实现解决方案
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>'+ '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>' + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'
}
<table class="table table-striped table-bordered" id="particulars_table">
<thead>
<tr>
<td>Particular</td>
<td>HSN</td>
<td>Qty</td>
<td>Rate</td>
<td>Action</td>
</tr>
</thead>
<tbody id="TextBoxContainer">
</tbody>
<tfoot>
<tr>
<th colspan="5">
<button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>
</th>
</tr>
</tfoot>
</table>
1回答
-
当年话下
您可以使用jquery 的keyup方法change，即：每当数量的值发生变化时获取该值，我们将使用它$(this)来获取所需的值tr，我们将获取价格的值并相乘qty，price并将值分配给total输入。演示代码：$(function() { $("#btnAdd").bind("click", function() { var div = $("<tr />"); div.html(GetDynamicTextBox("")); $("#TextBoxContainer").append(div); }); $("body").on("click", ".remove", function() { $(this).closest("tr").remove(); });});function GetDynamicTextBox(value) { return '<td><input name = "particular[]" type="text" class="form-control" placeholder="Particulars" required /></td>' + '<td><input name = "hsn[]" type="text" class="form-control" placeholder="HSN" required /></td>' + '<td><input name = "qty[]" type="number" class="form-control qty" placeholder="Quantity" required /></td>' + '<td><input name = "price[]" type="number" class="form-control price" placeholder="Price" required /></td>' + '<td><input name = "total[]" type="number" class="form-control total" placeholder="Total" required /></td>' + '<td><button type="button" class="btn btn-sm btn-danger remove" data-toggle="tooltip" data-original-title="Remove materials items"><i class="fa fa-trash"></i></button></td>'} var rowtoatal = 0;//on change of qty$(document).on('change keyup ', '.qty ', function() {//get qty value var qty = $(this).val(); //getting closest tr var elem = $(this).closest("tr"); //get price value var price = elem.find("td input.price").val(); //check if price is not null if (price !== null && price !== '') { rowtoatal = qty * price; console.log(qty + " * " + price + " = " + rowtoatal) //adding total to sub_total elem.find("td input.total").val(rowtoatal) }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><table class="table table-striped table-bordered" id="particulars_table"> <thead> <tr> <td>Particular</td> <td>HSN</td> <td>Qty</td> <td>Rate</td> <td>Action</td> </tr> </thead> <tbody id="TextBoxContainer"> </tbody> <tfoot> <tr> <th colspan="5"> <button id="btnAdd" type="button" class="btn btn-sm btn-success w-100" data-toggle="tooltip" data-original-title="Add more Materials"><i class="glyphicon glyphicon-plus-sign"></i>Add</button> </th> </tr> </tfoot></table>00