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

我有一个html表格，我可以通过点击按钮添加行。现在，每个表行包含8个td。根据从表行的第一个输入框（autocomplete）中选择的值，该特定行的其余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>

这里item_check.php检查该项是否已经存在。如果它不存在，它将显示一个新项对话框，如果它存在，那么它将转到item_value.php检索其余的值，并将它们显示在该表行的td中。这对第一行很好，但当我添加新行时，它就不起作用了。

---

我已经尽力提供了尽可能多的信息，如果您还需要什么，请告诉我。提前谢谢。

正如我在评论中所说，

IDs

必须是唯一的。在您的情况下，当您创建新行时，

id

是相同的，只取第一个值（即使您在第二行、第三行等中写入）。要解决此问题，您需要：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>

高级文书主任。
品名
描述
数量
单位
比率
税
数字化信息系统
全部的
1.
X

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

$（函数（）{
$（'#添加'）。单击（函数（）{
addnewrow（）；
});
});
函数addnewrow（）
{
变量n=（$（'.details tr'）。长度-0）+1；
var tr=''+
“+n+”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“X”+
'';
$（'.details'）。追加（tr）；
};
$（'body'）。委托（'.items'，'blur'，函数（e）{
checkitems（e.currentTarget.id.split（“”“）[1]）；//e.currentTarget.id.split（“”“）[1]-目标元素id
});
功能检查项（targetID）
{
var items=$（'#items'+targetID）.val（）；
如果（项目！=“”）{
$.ajax({
键入：“post”，
url:'itemcheck.php'，
数据：{key:items}，
数据类型：“json”，
成功：函数（数据）{
如果（数据）{
var tr=$（this.nestest（'tr'）；//这是检索值的代码。我想我需要在这里做一些更改
$（'#price'+targetID）.val（data.rate）；
$（'#size'+targetID）.val（data.des）；
$（'#qty.'+targetID）.val（data.qty）；
$（'#unit.'+targetID）.val（data.unit）；
}否则{
$（'#myitemmodal'）.modal（“show”）；
}
}
});
}
};

---

在本例中，我重写了代码，以便每个输入都有唯一的属性附加到其ID（在本例中，表中的行数，例如，

unit\u 1

，而不是

unit

）。

IDs

必须是唯一的。只能填写第一行。建议？您可以为每一新行添加唯一的id（例如数字），也可以编写稍微不同的

JS

函数。在什么意义上？请详细说明。@EdvinTenovimasI可以尝试通过修改代码回答您的问题来解决这个问题。当然……那很好。。谢谢我很高兴您能够解决这个问题！此外，如果你可以，你也可以考虑一个答案（不必这样做，但它确实帮助我）。感谢

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

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