填寫表格數據與在特定表格行中選擇的對應值

Question

我有一個html表格，其中我可以通過點擊一個按鈕添加行。現在每個表格行都包含8個td。根據從表格行的第一個輸入框（自動完成）中選擇的值，該特定行中其餘的td被填充來自數據庫的數據。現在一切工作正常，我的代碼，但唯一的問題是，這個東西只適用於第一個錶行。如果我添加新行並選擇新的東西，然後在該行TD沒有得到填充data.I認爲問題是我將不得不引用每個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> 

這裏是我的添加按鈕does-

$(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）。