HTML，jQuery - 更新表单后打印值 - 输入数组答案

【问题标题】：HTML, jQuery - Print values after updating form - input in arraysHTML，jQuery - 更新表单后打印值 - 输入数组
【发布时间】：2018-08-01 23:34:33
【问题描述】：

我有一个带有输入表单的表格，其中包含这样的字段。我也有添加行的功能，点击后 - 下面。

我的问题是如何动态显示更改后的所有值的总和，例如 Field1。

<table id="table">
    <tr>
      <td>Date</td>
      <td>Field 1</td>
      <td>Field 2</td>
    </tr>
    <tr>
      <td><input type="text" name="count[]" placeholder="Date"></td>
      <td><input type="text" name="field1[]"></td>
      <td><input type="text" name="field2[]"></td>
    </tr>
    <input type="button" value="Add Row" onclick="addRow('table')" />
  </table>

这里是 jQuery：

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var $row = '<tr>'+
      '<td><input type="text" name="count[]" placeholder="Date"></td>'+
      '<td><input type="text" name="field1[]"></td>'+
      '<td><input type="text" name="field2[]"></td>'+
'</tr>'
if( rowCount <= 15)
  $('#table').append($row);
else {
  alert("Error.");
}

我需要在表格之后添加类似这样的内容：

<span>SUM_FROM_FIELD1</span>

谢谢你的回答。

【问题讨论】：

标签： jquery html arrays

【解决方案1】：

您需要在field1[] 的某个父级上绑定一个更改事件并将其委托给它们，以便在任何field1[] 输入更改时触发它，即使它是新的。

对数组 reduce() 的调用将有助于您对值求和（请注意，它适用于 IE9+。对于较旧的浏览器，您必须按旧方法求和）

$("#table").on("change", "[name^=field1]", function() {
    var result = Array.reduce($("[name^=field1]"), function(carry, input) {
        return carry + parseInt($(input).val());
    }, 0);
    $(".sum_field_1").text(result);
}

请注意，我想您的 SUM_FOR_FIELD1 跨度标签有一个名为 .sum_field_1 的类

如果可能，为每个field1[] 输入添加一个类，这样选择器会更容易，因为按名称属性选择非常昂贵。

【讨论】：