Question

我正在尝试将tablerow的所有值添加到一起。只要有人将值输入到输入字段中即可。表：

<table>
  <thead>
    <tr>
    <th>
      Title
    </th>
    <th>
      Input
    </th>
    <th>
      Total
    </th>
    </tr>
  </thead>
  <tbody>
    <!-- Dynamially Generated Table Columns -->
    <tr>
      <td>Example</td>
      <td><input type="text" class="inputField" /></td>
      <td>Total: x</td>
    </tr>
  </tbody>
</table>

到目前为止我找到的唯一解决方案是：

$(document).on('input', '.inputField', function(){ /* Do something */});

这里的问题是，这一行读取文档中的所有输入字段，但我只想要一行。此外，如果我将其更改为'tbody'，它只会读取表体的所有字段。

所以我要找的是一种只选择单个tablerow的输入的方法，所以我可以将这些值加在一起。

非常感谢您的帮助！

Answer 1

这个答案假设您的意思是实际上在同一<input>内会有多个<tr>个元素，并且您希望将所有这些元素输入所有这些元素。

您仍然可以使用该活动。但关键是在该事件中，仅选择属于当前行的输入。由于您知道事件发生在哪个元素上，因此可以使用该信息查找其父行，从而发现该行中的所有其他输入元素。像这样：

$(document).on('input', '.inputField', function(){ 
  var parentRow = $(this).parents("tr").first();
  var inputs = parentRow.find('input[type="text"]');
  var total = 0;
  inputs.each(function(){
    total += parseInt(this.value);
  });
  alert (total);
});

请记住上面我没有包含任何关于字段输入是否实际上是有效整数或类似内容的验证。值得考虑的是。

此外，如果您想写入附近的<td>，可能最好给<td>一个班级，例如class="total"，然后您可以轻松更新它。而不是

alert(total);

在上面的例子中，你可以写

parentRow.find(".total").text(total);

Answer 2

你可以使用.change

$('input[name=myInput]').change(function() { ... });

JQuery：关于动态创建的输入字段的输入事件

2 个答案: