Question

我正在尝试检索对<td>行输入的Ajax响应，但是它没有按预期工作，它与输入绑定，但是当尝试向行中添加另一种产品时，它将替换先前的产品。

示例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);

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

1 个答案: