0

我正在使用 jquery-repeater 库在表中创建动态输入。每行将根据 keyup 事件计算平均值：

=============================
Col A | Col B | Col C | AVG |
=============================
1     | 2     | 3     | 2   |
2     | 3     | 4     | 3   |
...

Col A、B、C 是输入字段。用户可以根据需要添加多行，每行将显示最后一列的平均值（AVG）。

这是我的代码（使用 JQuery-repeater 查看）：

$("input[type=number]", "#table").keyup(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).val(total / 3);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table repeater" border="1">
  <thead>
    <tr>
      <th>
        <center>A - B</center>
      </th>
      <th>
        <center>A - C</center>
      </th>
      <th>
        <center>B - C</center>
      </th>
      <th>
        <center>AVG</center>
      </th>
      <th>
        <center>
          <button data-repeater-create id="add_data">
            Add Data
          </button>
        </center>
      </th>
    </tr>
  </thead>
  <tbody data-repeater-list="data">
    <tr data-repeater-item>
      <td><input type="number" name="val1"></td>
      <td><input type="number" name="val2"></td>
      <td><input type="number" name="val3"></td>
      <td><input name="avg" class="avg" readonly></td>
      <td>
        <center>
          <button data-repeater-delete>Delete</button>
        </center>
      </td>
    </tr>
  </tbody>
</table>

我希望该功能可以在每一行中工作，但实际上该功能只能工作一次。

提琴手

4

2 回答 2

1

您将需要为新添加的行附加侦听器。修改过的小提琴

每次我们将侦听器添加到使用$("input[type=number]", "#table tr:last-child").

$('.repeater').repeater({
  show: function() {
    $(this).slideDown();
    attachListeners();
  }
});

function attachListeners() {
  $("input[type=number]", "#table tr:last-child").keyup(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).val(total / 3);
  });
}

attachListeners();
于 2019-08-12T03:47:14.747 回答
1

因为您的行是动态创建的，所以您需要以这种方式向其中添加事件：

$(document).on("keyup", "#table input[type=number]", function(){})

工作小提琴

于 2019-08-12T03:50:28.607 回答