javascript - 获取对表的 td 输入的 Ajax 响应

Question

我正在尝试检索对 <td> 的 Ajax 响应行输入，但它没有按预期工作，它绑定(bind)到输入，但当尝试将另一个产品添加到行时，它会替换前一个产品。

示例1:

在上面的示例中，您首先可以看到，我已将“相机”添加到该行，然后尝试添加另一个产品，即“移动”，但它正在替换第一个产品。

然后我尝试了另一种方法，但它没有检索输入字段中的数据。

示例2:

在上面的示例中，它成功地将数据添加到下一行，但不可编辑。

HTML:

 <div class="table-responsive">
      <table class="table table-bordered table-condensed" id="mytable">
        <div class="row">
           <div>
            <input type="text" id="search" class="form-control"> //To search product by id
          </div>
          <div>
            <button type="button" name="add" id="add" class="btn btn-success">Add Row</button>
          </div>
        </div>
        <thead>
          <tr>
            <th>Product</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Action</th>
          </tr>
        </thead>
        <tr>
        <td><input type="text" name=" addmore[0][name]" id="pname" class="form-control"/></td> //This part commented in Example 2
        <td><input type="text" name="addmore[0][qty]" id="qty" class="form-control"/></td> //This part commented in Example 2
        <td><input type="text" name="addmore[0][price]" id="price" class="form-control"/></td> //This part commented in Example 2
        </tr>
      </table>
    </div>

检索数据的脚本(示例 1):

<script>
$('#search').on('keydown', function(e) {
if(e.which == 13){
var proid = $("#search").val();
//alert(proid);
$.ajax({
        url: '{{ URL::to('search-product/')}}'+"/"+ proid,
        type: "Get",    
        dataType:"json",   
        success: function (response) 
       {
            $.each(response, function (i, item) {
            $('#pname').val(item.product_name);
            $('#qty').val(1);
            $('#price').val(item.product_price);
            });
        }
    });
}
});
</script>

检索数据的脚本(示例 2):

<script>
$('#search').on('keydown', function(e) {
if(e.which == 13){
var proid = $("#search").val();
//alert(proid);
$.ajax({
        url: '{{ URL::to('search-product/')}}'+"/"+ proid,
        type: "Get",    
        dataType:"json",   
        success: function (response) 
       {
            var trHTML = '';
            $.each(response, function (i, item) {
                trHTML += '<tr><td>' + item.product_name +
                    '</td><td>' + '1' +
                    '</td><td>' + item.product_price +
                    '</td></tr>';
            });
            $('#mytable').append(trHTML);
        }
    });
}
});
</script>

添加和删除行的脚本:

<script type="text/javascript">
  var i = 0;
    $("#add").click(function(){
        ++i;
        $("#mytable").append('<tr><td><input type="text" name="addmore['+i+'][name]" class="form-control" /></td><td><input type="text" name="addmore['+i+'][qty]" class="form-control" /></td><td><input type="text" name="addmore['+i+'][price]" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
    });
    $(document).on('click', '.remove-tr', function(){  
         $(this).parents('tr').remove();
    });  
</script>

Answer 1

为了回应我的评论，替换第二个示例:

$.each(response, function (i, item) {
   trHTML += '<tr><td>' + item.product_name +
       '</td><td>' + '1' +
       '</td><td>' + item.product_price +
       '</td></tr>';
});
$('#mytable').append(trHTML);

与:

$.each(response, function (i, item) {
    trHTML += '<tr>' +
                '<td><input type="text" name=" addmore[0][name]" id="pname' + item.product_name  + '" class="form-control" value="' + item.product_name + '"/></td>' +
                '<td><input type="text" name=" addmore[0][qty]" id="qty'   + item.product_name  + '" class="form-control" value="1"/></td>' +
                '<td><input type="text" name=" addmore[0][price]" id="price' + item.product_name  + '" class="form-control" value="' + item.product_price + '"/></td>' +
              '</tr>';
});
$('#mytable').append(trHTML);