Question

我有下面的jQuery添加表

$(document).on('click', '.add', function(){
var html = '';
html += '<tbody><tr>';
html += '<td><select name="product_name[]" class="pu-input product_name"> 
<option value="">--Select--</option><?php echo 
fill_unit_select_box($connect); ?></select></td>';
html += '<td><input type="text" name="mt[]" class="pu-input mt" id="mt"/> 
</td>';
html += '<td><input type="text" name="ream[]" class="pu-input ream"></td>';
html += '<td><input type="text" name="unit_price[]" class="pu-input 
unit_price" id="price"></td>';
html += '<td><input type="text" name="d_price[]" class="pu-input d_price" 
id="discount"></td>';
html += '<td><input type="text" name="td_price[]" class="pu-input td_price" 
id="total_dis"></td>';
html += '<td><input type="text" name="vat[]" class="pu-input vat" id="vat"> 
</td>';
html += '<td><input type="text" name="t_vat[]" class="pu-input t_vat" 
id="t_vat"></td>';
html += '<td><input type="text" name="total[]" class="pu-input total" 
id="total"></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn- 
sm remove"><i class="fas fa-minus"></i></span></button></td></tr></tbody>';
$('#item_table').append(html);
$('tr').each(function(){
  $('input').keyup(function(){ // run anytime the value changes
    var mt  = Number($('#mt').val());   // get value of field
    var price = Number($('#price').val()); // convert it to a float
    var discount = Number($('#discount').val());
    var vat = Number($('#vat').val());

    document.getElementById('total').value = mt * price;
    document.getElementById('total_dis').value = mt * discount;
    document.getElementById('t_vat').value = mt * vat;
   // add them and output it
  });
});

我想做的是遍历每个表行并针对两个输入执行数学函数，然后将结果填充到第三个输入中。但问题是数学函数仅在第一行中起作用，而在其他行中不起作用。 enter image description here

Answer 1

您的代码有点混乱，下次尝试格式化它。这将帮助您更快地阅读它并使其更易于维护。

不过，这是实现此目的的基本示例：

function calculate () {
  const val1 = document.getElementById('input1').value;
  const val2 = document.getElementById('input2').value;
  
  document.getElementById('output').value = Number(val1) + Number(val2);
}

$('#calculate').on('click', calculate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" type="number">
<input id="input2" type="number">
  <br>
  <br>
<button id="calculate">calculate</button>
  <br>
  <br>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Output <input id="output" type="number">

Answer 2

整理好点击处理程序后，唯一真正的问题是使用相对定位而不是ID在相关行中定位项目。这是您的代码，其格式重新设置了说明更改的注释

$(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><select name="product_name[]" class="pu-input product_name"> 
<option value="">--Select--</option><?php echo 
fill_unit_select_box($connect); ?></select></td>';
  html += '<td><input type="text" name="mt[]" class="pu-input mt"/> 
</td>';
  html += '<td><input type="text" name="ream[]" class="pu-input ream"></td>';
  html += '<td><input type="text" name="unit_price[]" class="pu-input 
unit_price"></td>';
  html += '<td><input type="text" name="d_price[]" class="pu-input d_price"></td>';
  html += '<td><input type="text" name="td_price[]" class="pu-input td_price"></td>';
  html += '<td><input type="text" name="vat[]" class="pu-input vat"> 
</td>';
  html += '<td><input type="text" name="t_vat[]" class="pu-input t_vat"></td>';
  html += '<td><input type="text" name="total[]" class="pu-input total"></td>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn- 
sm remove"><i class="fas fa-minus"></i></span></button></td></tr>';
  $('#item_table').append(html);
});
// end of add.click handler

// since #item_table exists but its rows might not yet, use a delegated event handler attached to #item_table
$('#item_table').on("keyup", "input", function() { // run anytime any value changes
  // locate parent row relative to the input that was typed in
  var row = $(this).closest('tr');

  // locate mt and so on within the row by class - don't need id
  var mt = Number(row.find('.mt').val()); 
  var price = Number(row.find('.price').val());
  var discount = Number(row.find('.discount').val());
  var vat = Number(row.find('.vat').val());

  // output, again find the fields by class
  row.find('.total').val(mt * price);
  row.find('.d_price').val(mt * discount);
  // etc

  });
});

Answer 3

正如评论中提到的那样，HTML元素ID是唯一的。如果在创建行时不打算分配唯一的ID（例如，每次增加一个计数器），那么最好不使用元素ID。

第二，不需要在每次添加新行时都创建/分配事件处理程序。相反，请利用委托事件处理。完全删除您的$('tr').each(function(){，而在添加代码的行之外，输入以下内容：

  $('table').on('keyup', 'input', function(){ // run anytime the value changes
    $thisRow = $(this).parent().parent();console.log($thisRow.find('td>.total'));
    var mt  = Number($thisRow.find('td>.mt').val());   // get value of field
    var price = Number($thisRow.find('td>.unit_price').val()); // convert it to a float
    var discount = Number($thisRow.find('td>.d_price').val());
    var vat = Number($thisRow.find('td>.vat').val());

    $thisRow.find('td>.total').val(mt * price);
    $thisRow.find('td>.td_price').val(mt * discount);
    $thisRow.find('td>.t_vat').val(mt * vat);
   // add them and output it
  });

此代码将相对于当前正在处理keyup事件的输入遍历DOM（可能不是最有效的方法），并根据它们的相对位置将值放入适当的目标输入中。

DEMO

循环遍历每个表行以执行数学运算

3 个答案: