javascript - 如何使操作更加分散？

我有一个带有复选框和按钮验证的数据表（矩阵，薪水，工作日数和保费），我想在单击按钮验证时计算总和值，但是有一个错误，该值使我不满意。

<table class="table table-bordered" id="mytable">
  <tr>
    <th><input type="checkbox" id="check_all"></th>
    <th>matricule</th>
    <th>salary</th>
    <th>number day</th>
    <th>premium</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>5000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td>6000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>

  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>7000</td>
    <td>1</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>

  </tr>
</table>
<div class="form-group col-md-offset-5 ">
  <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>

jQuery代码，用于全部检查并获取一些值并计算总和：

$(document).ready(function() {
  $('#check_all').on('click', function(e) {
    if ($(this).is(':checked', true)) {
      $(".checkbox").prop('checked', true);
    } else {
      $(".checkbox").prop('checked', false);
    }
  });
  $('.checkbox').on('click', function() {
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $('#check_all').prop('checked', true);
    } else {
      $('#check_all').prop('checked', false);
    }
  });

  // jquery code for display array :
  $("#hide").click(function() {
    var items = [];
    $("tr").each(function(i, r) {
      if (i > 0 && $(r).find("input").first().prop("checked")) {
        //sum = (((salary/24)*nbre)+premium)
        let sum = ((($(r.cells[2]).innerText / 24) * $(r.cells[3]).innerText) + $(r.cells[4]).find('input').val());

        items.push({
          "matricule": r.cells[1].innerText,
          "salary": r.cells[2].innerText,
          "nbre": r.cells[3].innerText,
          "premium": $(r.cells[4]).find('input').val(),
          "sum": sum
        })
      }
    });
    console.log(items);
  });
})

最佳答案

将innerText替换为text()并使用parseInt进行计算。

$(document).ready(function() {
  $('#check_all').on('click', function(e) {
    if ($(this).is(':checked', true)) {
      $(".checkbox").prop('checked', true);
    } else {
      $(".checkbox").prop('checked', false);
    }
  });
  $('.checkbox').on('click', function() {
    if ($('.checkbox:checked').length == $('.checkbox').length) {
      $('#check_all').prop('checked', true);
    } else {
      $('#check_all').prop('checked', false);
    }
  });

  // jquery code for display array :
  $("#hide").click(function() {
    var items = [];
    $("tr").each(function(i, r) {
      if (i > 0 && $(r).find("input").first().prop("checked")) {
        //sum = (((salary/24)*nbre)+premium)
        let sum = (((parseInt($(r.cells[2]).text()) / 24) * parseInt($(r.cells[3]).text())) + parseInt($(r.cells[4]).find('input').val()));


        items.push({
          "matricule": r.cells[1].innerText,
          "salary": r.cells[2].innerText,
          "nbre": r.cells[3].innerText,
          "premium": $(r.cells[4]).find('input').val(),
          "sum": sum
        })
      }
    });
    console.log(items);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="mytable">
  <tr>
    <th><input type="checkbox" id="check_all"></th>
    <th>matricule</th>
    <th>salary</th>
    <th>number day</th>
    <th>premium</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>5000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td>6000</td>
    <td>2</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>

  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>7000</td>
    <td>1</td>
    <td><input type="text" name="prime" class="form-control" value="0"></td>

  </tr>
</table>
<div class="form-group col-md-offset-5 ">
  <button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>

Note: You can check input value is number or not using $.isNumeric.

关于javascript - 如何使操作更加分散？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56745594/