前一行不是使用jquery从附加行计算/更新 [英] previous row is not computing/updating from appended rows using jquery
本文介绍了前一行不是使用jquery从附加行计算/更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
找到了之前可以解决我问题的问题，并根据我的需要采用了答案基础动态表单，多个输入字段会计算
found this question which solve my problem before and adopt the answer base to my needs, dynamic forms multiple input fields calculate
但是我注意到当我更新上一行的数量时，总数量没有更新.您能帮我解决这个问题吗?预先谢谢你！
But I noticed when I am updating the amount of previous rows, the total amount is not updating. Can you help me how to solve this? thank you in advance!
$(document).ready(function() {
var i = 0;
$("#quantity-" + i).change(function() {
upd_art(i)
});
$("#price-" + i).change(function() {
upd_art(i)
});
$('#add').click(function() {
i++;
$('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0 placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
$("#quantity-" + i).change(function() {
upd_art(i)
});
$("#price-" + i).change(function() {
upd_art(i)
});
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function() {
alert($('#add_name').serialize()); //alerts all values
$.ajax({
url: "wwwdb.php",
method: "POST",
data: $('#add_name').serialize(),
success: function(data) {
$('#add_name')[0].reset();
}
});
});
function upd_art(i) {
var qty = $('#quantity-' + i).val();
var price = $('#price-' + i).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total-' + i).val(tot);
}
// setInterval(upd_art, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="articles">
<tr class="rrjeshta">
<td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td>
<td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list" /></td>
<td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list" readonly /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
推荐答案
您的问题是您在更新函数(全局变量)中重新使用了i.这意味着它仅适用于最新行，因为每次您的更改事件触发时，它都会更新与i当前值(即最后一个)匹配的行.您需要将特定行的索引传递给函数，而不是当前的总行数.
Your issue is that you are re-using i in your update function, which is a global variable. This means that it will only work for the latest row as each time your change event fire it updates the row which matches the current value of i (i.e. the last). You need to pass the index of the specific row to the function, rather than the current total row count.
您可以通过从现有输入id中获取它来执行此操作(即删除诸如quantity-之类的常见文本)，但我建议为每个输入添加属性for，该属性与的索引匹配行.
You can do this by taking it from your existing input id (i.e. removing the common text like quantity-) but I would advise adding an attribute for to each of the inputs, which matches to the index of the row.
您还可以通过将通用类添加到将触发重新计算的输入中来简化点击事件.
You can also simplify your click events by adding common classes to inputs that would trigger a re-calculation.
// Be careful when using global variables
var rowCount = 0;
// Minor changes here
// Added "for='i'" for input
// Added .quantity, .price and .total to the relevant inputs
$('#add').click(function() {
rowCount++;
$('#articles').append('<tr id="row' + rowCount + '"><td><input type="number" value=0 id="quantity-' + rowCount + '" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="' + rowCount + '" /></td> <td><input type="number" id="price-' + rowCount + '" name="price[]" value=0 placeholder="price" class="form-control name_list price" for="' + rowCount + '" /></td> <td><input type="number" id="total-' + rowCount + '" name="total[]" placeholder="total" class="form-control name_list total" for="' + rowCount + '" readonly /></td> <td><button type="button" name="remove" id="' + rowCount + '" class="btn btn-danger btn_remove">X</button></td></tr>');
// No need to add individual events here
});
// Add a generic event listener for any change on quantity or price classed inputs
$("#articles").on('change', 'input.quantity, input.price', function() {
upd_art($(this).attr("for"));
});
// No changes
$(document).on('change', 'input', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
// No changes
$('#submit').click(function() {
alert($('#add_name').serialize()); //alerts all values
$.ajax({
url: "wwwdb.php",
method: "POST",
data: $('#add_name').serialize(),
success: function(data) {
$('#add_name')[0].reset();
}
});
});
// Using a new index rather than your global variable i
function upd_art(ind) {
var qty = $('#quantity-' + ind).val();
var price = $('#price-' + ind).val();
var totNumber = (qty * price);
var tot = totNumber.toFixed(2);
$('#total-' + ind).val(tot);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="articles">
<tr class="rrjeshta">
<td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" for="0"/></td>
<td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list price" for="0" /></td>
<td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list total" for="0" readonly /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
这篇关于前一行不是使用jquery从附加行计算/更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
