【发布时间】：2017-01-25 12:22:17
【问题描述】：
我有一个 html 表格，我可以通过点击一个按钮来添加行。现在每个表行包含 8 个 td。根据从表行中的第一个输入框（自动完成）中选择的值，该特定行中的其余 td 将填充数据库中的数据。现在我的代码一切正常，但唯一的问题是这个东西只适用于第一个表行。如果我添加新行并选择新的东西，那么该行中的 td 不会被数据填充。我认为问题是我将不得不引用其中的每个 tr 和 td 并通过它们循环代码。但我无法做到这一点。请帮帮我。 这是代码-
<table class="table table-bordered" id="stock" >
<thead>
<tr>
<td>Sr no.</td>
<td>Product Name</td>
<td>Description</td>
<td>Qty</td>
<td>Unit</td>
<td>Rate</td>
<td>Tax</td>
<td>Dis</td>
<td>Total</td>
<td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
</tr>
</thead>
<tbody class="details">
<tr>
<td class="no">1</td>
<td><input type="text" name="items[]" id="items" class="form-control items" autocomplete="off" /></td>
<td><textarea name="size[]" id="size" class="form-control size" autocomplete="off"></textarea></td>
<td><input type="text" name="qty[]" id="qty" class="form-control qty" autocomplete="off"/></td>
<td><input type="text" name="unit[]" id="unit" class="form-control unit" autocomplete="off"/></td>
<td><input type="text" name="price[]" id="price" class="form-control price" autocomplete="off"/></td>
<td><input type="text" name="tax[]" id="tax" class="form-control tax" autocomplete="off" /></td>
<td><input type="text" name="dis[]" id="dis" class="form-control dis" autocomplete="off" /></td>
<td><input type="text" name="stkamt[]" id="amt" class="form-control amt" autocomplete="off" /></td>
<td><button class="btn btn-danger remove">X</button></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
这是我的添加按钮的作用-
$(function(){
$('#add').click(function(){
addnewrow();
});
function addnewrow(){
var n = ($('.details tr').length - 0)+1;
var tr = '<tr>'+
'<td class="no">'+n+'</td>'+
'<td><input type="text" name="items[]" id="items" class="form-control items" autocomplete="off" /></td>'+
'<td><textarea name="size[]" id="size" class="form-control size" autocomplete="off"></textarea></td>'+
'<td><input type="text" name="qty[]" id="qty" class="form-control qty" autocomplete="off"/></td>'+
'<td><input type="text" name="unit[]" id="unit" class="form-control unit" autocomplete="off"/></td>'+
'<td><input type="text" name="price[]" id="price" class="form-control price" autocomplete="off"/></td>'+
'<td><input type="text" name="tax[]" id="tax" class="form-control tax" autocomplete="off" /></td>'+
'<td><input type="text" name="dis[]" id="dis" class="form-control dis" autocomplete="off" /></td>'+
'<td><input type="text" name="stkamt[]" id="amt" class="form-control amt" autocomplete="off" /></td>'+
'<td><button class="btn btn-danger remove">X</button></td>'+
'</tr>';
$('.details').append(tr);
}
当我从第一个 td 的自动完成下拉列表中选择特定项目并转到下一个字段时会发生这种情况-
$('body').delegate('.items','blur',function(){
checkitems();
});
function checkitems(){
var items = $('#items').val();
if(items == ""){
}else{
$.ajax({
type: 'post',
url: 'itemcheck.php',
data: {key: items},
dataType:'json',
success: function(data) {
if(data){
var tr = $(this).closest('tr'); // here is the code for retrieving the values. i think here i need to make some changes
$('#price').val(data.rate);
$('#size').val(data.des);
$('#qty').val(data.qty);
$('#unit').val(data.unit);
}
else
{
$('#myitemmodal').modal("show");
}
}
});
}
}
这里 item_check.php 检查项目是否已经存在。如果不存在，则显示一个新项目对话框，如果存在，则转到 item_value.php 检索其余值并显示它们在该表行的 td 中。这对第一行工作正常，但是当我添加新行时，它不起作用。 我已尽力提供尽可能多的信息，如果您需要更多信息，请告诉我。提前致谢。
【问题讨论】：
-
IDs必须是唯一的。只能填写第一行。有什么建议吗？您可以为每个新行添加唯一 id（例如，使用数字）或编写一些不同的JS函数。 -
在什么意义上？你能详细说明一下吗。@EdvinTenovimas
-
我可以尝试用修改后的代码回答您的问题来解决这个问题。
-
当然...那很好..谢谢
标签： javascript php jquery html mysql