Question

我有带有输入表单的表格，其中包含类似这样的字段。另外，单击下面的-后，我还具有添加行的功能。

我的问题是从例如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>

谢谢您的回答。

Answer 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 span标签具有一个名为.sum_field_1的类

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

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

1 个答案: