テーブルのデータを特定のテーブル行で選択した対応する値で塗りつぶす

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

does-私の追加ボタンは、私が最初のTDでオートコンプリートのドロップダウンから特定の項目を選択し、次に行くときに何が起こるかあるものですアイテムが既に存在しているかどうか、それが存在しない.IF場合はチェックitem_check.phpここでフィールド -

$('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_に行きますvalue.phpを使用して残りの値を取得し、それらをテーブル行のtdに表示します。このことは最初の行で正常に機能しますが、新しい行を追加すると機能しません。 できるだけ多くの情報を提供しようとしましたが、何かもっと必要な情報があれば教えてください。事前に感謝します。

Answer 1

コメントで述べたように、IDsは一意である必要があります。あなたの場合、新しい行を作成するときには、IDsは同じで、2番目、3番目などの行に書き込んだとしても最初の値だけが取られます。解決するには、以下を行う必要があります。1）ユニークなIDを持つ入力を作成します。 2）は、正しい入力（最初のものだけでなく）にデータを取得して返します。

完全かつ書き換えコード：

HTML側：

のJavaScript側

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

：各入力は、そのIDに取り付けられたユニークな特性を有するように、私は、コードを書き換えるこの場合

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

（この場合、テーブル内の行数、たとえばunitではなくunit_1）。