Question

我是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按钮为每个员工总计=（工资+税）

Answer 1

$("#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>

Answer 2

您可以使用selector来使用iQuery获取或设置val。像这样的东西

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

Answer 3

这是一个解决方案：

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)
})

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

3 个答案: