Question

“总计”输入在添加的元素中不起作用！它仅在第一行有效！有什么帮助吗？ ................................................... ................................................... ................................................... ..........

$(document).ready(function(){



	$('input').on('keyup', function () {
	$('#total').val($('#price').val() * $('#qua').val());
	});


	var i=1;
	$('#add_input').click( function(){

		var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" id="qua" placeholder="Quantity"/></td><td><input type="text" name="price[]" id="price" placeholder="Price"/></td><td><input type="text" name="total[]" id="total" placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

		i++;
		$('#dynamic').append(newInput);


	});



	$(document).on('click', '.btn_remove', function(){
		var button_id = $(this).attr("id");
		$('#row'+button_id+'').remove();
	});


	$('#submit').click(function(){
		$.ajax({
			url:"insert.php",
			method:"POST",
			data:$('#add_me').serialize(),
			success: function(data)
			{
				alert(data);
				$('#add_me')[0].reset();
			}
		});
	});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing</h1>
<form name="add_me" id="add_me">
<table id="dynamic">
	<tr>
		<td><input type="text" name="type" placeholder="Select Product"/></td>
		<td><input type="text" name="des" placeholder="Product Description"/></td>
		<td><input type="text" name="qua" id="qua" placeholder="Quantity"/></td>
		<td><input type="text" name="price" id="price" placeholder="Price"/></td>
		<td><input type="text" name="total" id="total" placeholder="Total" readonly/></td>

	</tr>
	<button type="button" name="add" id="add_input">Add</button>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
</body>

Answer 1

$('body').on('input', 'keyup', function () {
  var price = $(this).closest('tr').find('[data-price]').val();
  var qua = $(this).closest('tr').find('[data-qua]').val();
  $(this).closest('tr').find('[data-total]').val( price * qua );
});

因为js在您启动页面并创建事件后运行一次。要与动态添加的事件一起使用，您必须在父项上进行事件（通常使用$('body')）

而且id必须是唯一的，所以最好是

var newInput = $('<tr id="row'+i+'"><div><td><input type="text" name="type[]" placeholder="Select Product"/></td><td><input type="text" name="des[]" placeholder="Product Description"/></td><td><input type="text" name="qua[]" data-qua='' placeholder="Quantity"/></td><td><input type="text" name="price[]" data-price='' placeholder="Price"/></td><td><input type="text" name="total[]" data-total='' placeholder="Total" readonly/></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">Remove</button></td></div></tr>');

<table id="dynamic">
<tr>
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" data-qua='' placeholder="Quantity"/></td>
    <td><input type="text" name="price" data-price='' placeholder="Price"/></td>
    <td><input type="text" name="total" data-total='' placeholder="Total" readonly/></td>

</tr>
<button type="button" name="add" id="add_input">Add</button>

Answer 2

原因是您的新tr没有绑定任何事件。解决方案：在您的表格后面有一个不可见的行模板，在输入标签中带有类而不是id：

  <div style="display:none">
   <tr id="row_template">
    <td><input type="text" name="type" placeholder="Select Product"/></td>
    <td><input type="text" name="des" placeholder="Product Description"/></td>
    <td><input type="text" name="qua" class="qua" placeholder="Quantity"/></td>
    <td><input type="text" name="price" class="price" placeholder="Price"/></td>
    <td><input type="text" name="total" class="total" placeholder="Total" readonly/></td>
<td><button type="button" name="remove" class="btn_remove">Remove</button></td>
    </tr> 
  </div>

在您的js中：

 $('input.price,input.qua').on('keyup', function () {
 var parent_tr = $(this).closest('tr');
 parent_tr.find('.total').val(parent_tr.find('.price').val() * parent_tr.find('.qua').val());
 });

 var i=1;

    $('#add_input').click( function(){

    //to copy the template tr with its binding events (.on('keyup')...) :
    var newInput = $('#row_template').clone(true).attr("id",i);

    i++;

    $('#dynamic').append(newInput);
    });

 $(document).on('click', '.btn_remove', function(){
     $(this).closest("tr").remove();
});

动态添加的元素中的Keyup事件处理程序

2 个答案: