jQuery 实现表格列合计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现多个输入框输入时数值自动相加</title>
</head>
<body>
    <table id="table-fund">
      <caption class="table-caption-legend">
      (单位：万元)</caption>
      <thead>
          <tr>
              <th colspan="3">经费到位情况</th>
          </tr>
          <tr>
              <th>科目</th>
              <th>预算数</th>
          </tr>
      </thead>
      <tr>
          <td>1.省科技经费</td>
          <td>
              <input id="SouProSciTech" type="text" />
          </td>
      </tr>
      <tr>
          <td>2.单位自筹</td>
          <td>
              <input id="SouUnitSelfFinanc" type="text" />
          </td>
      </tr>
      <tr>
          <td>3.银行贷款</td>
          <td>
              <input id="SouBankloans" type="text" />
          </td>
      </tr>
      <tr>
          <td>
              <span class="totall">合</span><span class="totall">计</span>
          </td>
          <td>
              <input id="TotalSou" readonly="readonly" type="text" />
          </td>
        </tr>
    </table>

<script src="jquery-1.12.4.js"></script>
<script>
  // 1 为每个input绑定事件
  //  实现在单元格值发生变化时，合计行的单元格的值自行发生变化，采用.each()遍历input并为其绑定函数keyup
  //  在keyup事件发生时进行合计。
  //  这里遍历除统计单元格之外的每个input，以下代码遍历第二列的输入框，在:not()中排除合计单元格的input。
  //  在input的keyup触发时调用合计方法。
  $("#table-fund tr").each(function () {
      $(this).find("td:eq(1) input:not(#TotalSou)").keyup(function () {
          totalSouFund();//调用合计方法
      });
  });

  // 2 实现合计
  // (1)totalSou用来存储合计值，在每次调用该函数时把totalSou置0，然后遍历每个单元格中的值进行累加；
  function totalSouFund() {
        totalSou = 0;
        $("#table-fund tr").each(function () {
            $(this).find("td:eq(1) input:not(#TotalSou)").each(function () {
                totalSou += getNumValue($(this)) ;
                $("#TotalSou").val(Number(totalSou.toFixed(4)));
            });
        });
  }

  // (2) getNumValue()用来获取文本框的值，返回float；
  function getNumValue(controlid) {
      var num = controlid.val();
      if (validateInput(num)) {
          num = parseFloat(num);
      }
      else {
          controlid.val("");
          num = 0;
      }
      return num;
  }

  // 3 validateInput() 返回一个Bool值用来验证输入的值是否有效，确保getNumValue返回一个有效数值
  function validateInput(inputstr) {
      flag = false;
      if (inputstr != "") {
          if (isNaN(inputstr)) {
              flag = false; //如果输入字符不是数字
          }
          else {//输入数字但是小于0
              if (parseFloat(inputstr) < 0)
                  flag = false;
              else
                  flag = true;
          }
      }
      return flag;
  }

  // 4 处理javaScript中浮点数计算的出现的问题
  $("#TotalSou").val(Number(totalSou.toFixed(4)));

</script>
              
</body>
</html>
posted on 2020-04-22 20:48 闪亮的金子阅读(695) 评论(0) 收藏举报