Question

我在表格中有动态多输入。

我想在每个id文本框上添加事件，也在每个数量上添加事件并调用ajax。最后，在值更改时在小计上添加事件，添加新行多个输入。

你可以帮我吗？

<td><input type="text" maxlength="13" name="id[]" id="id" required></td>
<td><input type="text" name="name[]" id="name" readonly required></td>
<td><input type="text" name="quantity[]" id="quantity" required></td>
<td><input type="text" name="price[]" id="price" readonly required></td>
<td><input type="text" name="subtotal[]" id="subtotal" readonly required></td>

<script>
$(document).ready(function(){
    $("#id").each(function(index, item){
        $(item).on("change paste keyup", function(){
            var id = $(this).val();
            $.ajax({  
                dataType: 'json',
                url:"load_product.php",  
                method:"POST",  
                data:{id:id},  
                success:function(data) {  
                    $('#name').val(data.name);
                    $('#price').val(data.price);
                }  
            });
        });
    });

    $("#quantity").on("change paste keyup", function(){
        var qty = $(this).val();
        var price = $('#price').val();
        var subtotal = qty * price;
        $('#subtotal').val(subtotal);
    });
});
</script>

Answer 1

您的涂鸦显示两行输入字段。如果两行中的 id 字段都包含id="id"，则可能存在以下问题：ID必须唯一。最好为ID添加一个数字（例如id="id1"）或使用class或data-属性。

如果您还想动态地向表中添加行，则应使用jQuery的on function with the selector parameter。否则，新元素将不会自动绑定到事件。

这是使用data-属性的可能解决方案，包括用于插入新行的按钮：

$(document).ready(function(){
    var groupCount = 0;
  
    String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
    };
  
    var rowTemplate = '<tr>'+
        '<td><input type="text" size="3" maxlength="13" name="id[]" data-group="%group%" data-id="id" required></td>'+
        '<td><input type="text" size="3" name="name[]" data-group="%group%" data-id="name" readonly required></td>'+
         '<td><input type="text" size="3" name="quantity[]" data-group="%group%" data-id="quantity" required></td>'+
         '<td><input type="text" size="3" name="price[]" data-group="%group%" data-id="price" value="4" readonly required></td>'+
         '<td><input type="text" size="3" name="subtotal[]" data-group="%group%" data-id="subtotal" readonly required></td>'+
         '</tr>';
   
    for (var i=0; i<2; i++) {
        groupCount++;
        $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount));
    }
  
    $(document).on("change paste keyup", "input[data-id='id']", function(){
        var id = $(this).val();
        var group = $(this).data('group');
   		console.log('id:', id, group);
    });

    $(document).on("change paste keyup", "input[data-id='quantity']", function(){
        var qty = $(this).val();
        var group = $(this).data('group');
        var price = $("input[data-id='price'][data-group='"+group+"']").val();
        var subtotal = qty * price;
        $("input[data-id='subtotal'][data-group='"+group+"']").val(subtotal);
    });
  
    $("#btnadd").on('click', function() {
        groupCount++;
        $('#mytable tr:last').after(rowTemplate.replaceAll('%group%', groupCount));      
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tr>
  <th>id</th>
  <th>name</th>
  <th>qty</th>
  <th>price</th>
  <th>subtotal</th>
</tr>
</table>
<button id="btnadd">New row</button>

多个动态输入添加事件jquery并调用ajax

1 个答案: