时间戳

首页 > 解决方案 > 如何从表列中的输入中获取值并将它们总结起来？

html - 如何从表列中的输入中获取值并将它们总结起来？

问题描述

我正在制作一个条目列表，该列表将自动累加金额并在底部显示总金额。我正在尝试在函数中实现 onchange，但不确定如何去做。如果值是固定的并且需要刷新页面，我当前的代码只会总结金额。

提前致谢。

var rows = $("#data tr:gt(0)");
var tamount;

rows.children("td:nth-child(3)").each(function() {
 tamount += parseInt($(this).html());
});

$("#total_amount").html(tamount);

| No | Description | Amount |
| -- | ----------- | ------ |
| 1  | abc         | 2.50   |
| 2  | efg         | 1.90   |
| 3  | tyu         | 5.00   |
| 4  | mno         | 7.90   |

--------------------
Total Amount : 17.30
--------------------

<table id="data">
    <tr>
        <th>No</th>
        <th>Description</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
</table>

<div>
    <h5>Total Amount :<input type="number" name="total_amount" readonly></h5>
</div>

标签： htmljquery

解决方案

在您的 javascript 中尝试此代码：

$(document).ready(function () {
   $('input[name="total_amount"]').val(calcSum());
       $('input[name="amount"]').change(function () { 
         $('input[name="total_amount"]').val(calcSum());
       });
   });

function calcSum() {
  var tamount = 0;
  $('input[name="amount"]').each(function() {
    tamount += parseInt(($(this).val() ? $(this).val() : 0));
  });
  return tamount;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
    <tr>
        <th>No</th>
        <th>Description</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
    <tr>
        <td>2</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
    <tr>
        <td>3</td>
        <td><input type="text" name="descrpt"></td>
        <td><input type="number" name="amount"></td>
    </tr>
</table>

<div>
    <h5>Total Amount :<input type="number" name="total_amount" readonly></h5>
</div>

解释：

  • $('input[name="amount"]')您可以直接使用来引用每个输入元素，而不是获取子元素
  • $('input[name="amount"]').each()将遍历每个数字字段
  • 我创建了一个新函数calcSum()来完成计算部分。
  • 您应该使用.val()输入元素而不是.html()
  • 注意，change()将要求您从现场失去焦点，或者，您可以使用keyup()

无需更改 html。

推荐阅读