Заполните данные таблицы соответствующим значением, выбранным в определенной строке таблицы

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> 

вот что моя кнопка добавить 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); 
} 

вот то, что происходит, когда я выбрать конкретный элемент из выпадающего списка автозаполнения в первую тд и перейти к следующему поле-

$('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).