时间戳

首页 > 解决方案 > HTML，jQuery - 更新表单后打印值 - 输入数组

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

问题描述

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

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

谢谢您的回答。

标签： jqueryhtmlarrays

解决方案

您需要在某个父级上绑定一个更改事件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[]输入添加一个类，这样选择器会更容易，因为按名称属性选择非常昂贵。

推荐阅读