Question

我正在寻找一种方法来读取动态创建的输入字段的值，然后获得它们的平均值。我有一个包含多个输入的tablerow，我想将这些输入的所有值加在一起，并在行的末尾显示它们。

到目前为止我得到了什么：

Html（我在我的表中生成了这样的行）：

<tr>
<td><input type='number' class='userInput' name='userInput'></td>
<td><input type='number' class='userInput' name='userInput'></td>
<td><input type='number' class='userInput' name='userInput'></td>
<td class='avg'>X</td> <!-- Average -->
</tr>

我的jQuery代码如下所示：

$(document).on('input', '.userInput', function () {
var parentRow = $(this).parents('td');
var inputs = parentRow.children('input');
var avgText = $(this).parents('tr').find('.avg');
var avg = 0;    
inputs.each(function () {
avg += parseInt(this.value);
});
avg /= 3;
avgText.text(avg);
});

我对这段代码的问题是，它没有更新总数，它只是在我写入第二个输入字段时覆盖它。所以我正在寻找的是一种只更新平均值的方法。

Answer 1

您没有选择所有元素来查找平均值。

这些问题是：

var parentRow = $(this).parents('td');
var inputs = parentRow.children('input');

第一行仅选择紧邻所选输入的td。因此，它唯一的孩子就是被改变的输入。其他输入被忽略。因此，您将该单个值除以3，这意味着最终平均值完全错误。

此示例是正确的 - 我们一直到<tr>，然后使用.find()获取<tr>中的所有输入（不能使用子项，因为它只下降一级，所以你只需要<td> s。

此外，我通过除以输入数而不是硬编码值使其更灵活。因此，如果您向该行添加更多输入，它也会自动平均这些输入。

$(document).on('input', '.userInput', function () {
    var parentRow = $(this).parents('tr');
    var inputs = parentRow.find('input');
    var avgText = parentRow.find('.avg');
    var avg = 0;    
    inputs.each(function () {
        avg += parseInt(this.value);
    });
    avg /= inputs.length;
    avgText.text(avg);
});

Answer 2

试试这个 - https://jsfiddle.net/mpy31eh7/

<table id="myTable">

  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td ><label class="avg"></label></td>
    <!-- Average -->
  </tr>
  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td class='avg'>X</td>
    <!-- Average -->
  </tr>
  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td class='avg'>X</td>
    <!-- Average -->
  </tr>
</table>


$(document).ready(function() {

  $("input[type=number]", "#myTable").change(function() {

   var $parent = $(this).parents('tr');
   var allInputs = $("input[type=number]", $parent);
   var total = 0;

   $.each(allInputs, function(){
       total += $(this).val() === ''? +0 : +$(this).val();
   });

   $(".avg", $parent).text(total/3);

  });

});

Jquery读取动态输入字段的值

2 个答案: