用在特定表格行中选择的相应值填充表格数据

Question

我有一个 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 在该表行中。这件事对于第一行工作正常，但是当我添加新行时，它不起作用。 我已尝试提供尽可能多的信息，如果您需要更多信息，请告诉我。提前致谢。

Answer 1

正如我在评论中所说， IDs必须是唯一的。 在您的情况下，当您创建新行时， IDs是相同的，并且只采用第一个值（即使您在第二、第三等行中写入）。 要解决，您需要： 1）创建具有唯一ID的输入； 2）检索数据并将其返回到正确的输入（不仅仅是第一个）。

完整和重写的代码：

HTML端：

<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_1" class="form-control items"  autocomplete="off" /></td>
        <td><textarea name="size[]" id="size_1" class="form-control size" autocomplete="off"></textarea></td>
        <td><input type="text" name="qty[]" id="qty_1" class="form-control qty" autocomplete="off"/></td>
        <td><input type="text" name="unit[]" id="unit_1" class="form-control unit" autocomplete="off"/></td>
        <td><input type="text" name="price[]" id="price_1" class="form-control price" autocomplete="off"/></td>
        <td><input type="text" name="tax[]" id="tax_1" class="form-control tax"  autocomplete="off" /></td>
        <td><input type="text" name="dis[]" id="dis_1" 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>

JavaScript 端：

$(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_' + n + '" class="form-control items"  autocomplete="off" /></td>' +
        '<td><textarea name="size[]" id="size_' + n + '" class="form-control size" autocomplete="off"></textarea></td>' +
        '<td><input type="text" name="qty[]" id="qty_' + n + '" class="form-control qty" autocomplete="off"/></td>' +
        '<td><input type="text" name="unit[]" id="unit_' + n + '" class="form-control unit" autocomplete="off"/></td>' +
        '<td><input type="text" name="price[]" id="price_' + n + '" class="form-control price" autocomplete="off"/></td>' +
        '<td><input type="text" name="tax[]" id="tax_' + n + '" class="form-control tax"  autocomplete="off" /></td>' +
        '<td><input type="text" name="dis[]" id="dis_' + n + '" class="form-control dis" autocomplete="off" /></td>' +
        '<td><input type="text" name="stkamt[]" id="amt_' + n + '" class="form-control amt" autocomplete="off" /></td>' +
        '<td><button class="btn btn-danger remove">X</button></td>' +
        '</tr>';
    $('.details').append(tr);
};

$('body').delegate('.items', 'blur', function(e) {
    checkitems(e.currentTarget.id.split('_')[1]);   // e.currentTarget.id.split('_')[1] - Target element ID
});

function checkitems(targetID)
{
    var items = $('#items_' + targetID).val();
    if (items != "") {
      $.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_' + targetID).val(data.rate);
            $('#size_' + targetID).val(data.des);
            $('#qty_' + targetID).val(data.qty);
            $('#unit_' + targetID).val(data.unit);
        } else {
           $('#myitemmodal').modal("show");
         }
       }
      });
    }
};

在这种情况下，我重写了代码，以便每个输入都具有附加到其 ID 的唯一属性（在这种情况下，表中的行数，例如， unit_1而不是unit ）。