如何使用jquery-onlick函数对表单文本字段数组中的值求和

How to sum values from form text field array using jquery onlick function

本文关键字：数组 求和 字段 文本 jquery-onlick 何使用 函数 表单      更新时间：2023-09-26

我是jQuery和javascript的新手，我需要关于如何对数组中的表单文本字段进行计算的帮助。请参阅以下示例代码；

<head lang="en">
  <meta chartaxt="UTF-8">
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <title>Sample salary computation</title>
</head>
<body>
  <form method="POST" name="regis" id="regis">
    <table align="center" border="1" width="200">
      <tr>
        <th>Staff ID</th>
        <th>Salary</th>
        <th>Total Tax</th>
        <th>Total Net Pay</th>
      </tr>
      <!--Staff 1-->
      <tr data-id="STAFF/2016/001">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>
      <tr data-id="STAFF/2016/002">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>

      <tr data-id="STAFF/2016/003">
        <td>
          <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
        </td>
        <td>
          <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
        </td>
        <td>
          <input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
        </td>
        <td>
          <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
        </td>
      </tr>
    </table>
  </form>
</body>

我想要一个jquery脚本，它可以使用onclick按钮

为每个员工合计=（工资+税收）

$("#submit").click(function() {
  $("tr").each(function() {
    if ($(this).find(".salary")) {
      var salary = parseInt($(this).find(".salary").val(), 10)
      var tax = parseInt($(this).find(".tax").val(), 10)
      $(this).find(".total").val(salary + tax)
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
  <table align="center" border="1" width="200">
    <tr>
      <th>Staff ID</th>
      <th>Salary</th>
      <th>Total Tax</th>
      <th>Total Net Pay</th>
    </tr>
    <!--Staff 1-->
    <tr data-id="STAFF/2016/001">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>
    <tr data-id="STAFF/2016/002">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>
    <tr data-id="STAFF/2016/003">
      <td>
        <input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
      </td>
      <td>
        <input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
      </td>
      <td>
        <input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
      </td>
      <td>
        <input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
      </td>
    </tr>
  </table>
  <button id="submit" type="button">Submit</button>

您可以使用选择器通过iQuery获取或设置val。像这样的

$("button").click(function(){
    var total = $("input[name=salary]").val()+$("input[name=tax]").val();
    $("input[name=total]").val(tatal);
  });

这里有一个解决方案：

http://codepen.io/tryggvigy/pen/BzAqGR

var sums = []
$('input[type=button]').click(function() {
  var salaries = $('.salary')
    .toArray()
    .map(function(salary) { return salary.value })
  var taxes = $('.tax')
    .toArray()
    .map(function(tax) { return tax.value})
  sums = salaries.map(function(salary, i) {
    return parseInt(salary) + parseInt(taxes[i])
  })
  alert(document.sums)
})
相关文章：