zoukankan      html  css  js  c++  java
  • jQuery 实现表格列合计

    用jQuery实现表格列的合计功能,当单元格的值发生变化时,合计行自动统计个单元格的值。

    1.编写html

       1:   <table id="table-fund">
       2:          <caption class="table-caption-legend">
       3:              (单位:万元)</caption>
       4:          <thead>
       5:              <tr>
       6:                  <th colspan="3">经费到位情况</th>
       7:              </tr>
       8:              <tr>
       9:                  <th>科目
      10:                  </th>
      11:                  <th>预算数</th>
      12:                  <th>到位数</th>
      13:              </tr>
      14:          </thead>
      15:          <tr>
      16:              <td>1.省科技经费
      17:              </td>
      18:              <td>
      19:                  <input id="SouProSciTech" type="text" />
      20:              </td>
      21:              <td>
      22:                  <input id="ProSciTechAvailable" type="text" /></td>
      23:          </tr>
      24:          <tr>
      25:              <td>2.单位自筹
      26:              </td>
      27:              <td>
      28:                  <input id="SouUnitSelfFinanc" type="text" />
      29:              </td>
      30:              <td>
      31:                  <input id="UnitSelfFinancAvailable" type="text" /></td>
      32:          </tr>
      33:          <tr>
      34:              <td>3.银行贷款
      35:              </td>
      36:              <td>
      37:                  <input id="SouBankloans" type="text" />
      38:              </td>
      39:              <td>
      40:                  <input id="BankloansAvailable" type="text" /></td>
      41:          </tr>
      42:          <tr>
      43:              <td>
      44:                  <span class="totall"></span><span class="totall"></span>
      45:              </td>
      46:              <td>
      47:                  <input id="TotalSou" readonly="readonly" type="text" />
      48:              </td>
      49:              <td>
      50:                  <input id="TotalSouAvailable" readonly="readonly" type="text" />
      51:              </td>
      52:          </tr>
      53:      </table>

    2. Script实现

      2.1 为每个input绑定事件

    实现在单元格值发生变化时,合计行的单元格的值自行发生变化,这里采用.each()遍历input并为其绑定函数keyup(这里不采用change),在keyup事件发生时进行合计。

       1:   $("#table-fund tr").each(function () {
       2:          $(this).find("td:eq(1) input:not(#TotalSou)").keyup(function () {
       3:              totalSouFund();//调用合计方法
       4:          });
       5:      });

    这里遍历除统计单元格之外的每个input,以上代码遍历第二列的输入框,在:not()中排除合计单元格的input。在input的keyup触发时调用合计方法。

    2.2 实现合计

       1:  function totalSouFund() {
       2:      totalSou = 0;
       3:      $("#table-fund tr").each(function () {
       4:          $(this).find("td:eq(1) input:not(#TotalSou)").each(function () {
       5:              totalSou += getNumValue($(this)) ;
       6:              $("#TotalSou").val(Number(totalSou.toFixed(4)));
       7:          });
       8:      });
       9:  }

    (1) totalSou用来存储合计值,在每次调用该函数时把totalSou置0,然后遍历每个单元格中的值进行累加;

    (2) getNumValue()用来获取文本框的值,返回float;

       1:  function getNumValue(controlid) {
       2:      /// <summary>
       3:      /// Get a number from input tag which type is text
       4:      /// </summary>
       5:      /// <param name="controlid">id of input control</param>
       6:      /// <returns type="">float or 0</returns>
       7:      var num = controlid.val();
       8:      if (validateInput(num)) {
       9:          num = parseFloat(num);
      10:      }
      11:      else {
      12:          controlid.val("");
      13:          num = 0;
      14:      }
      15:      return num;
      16:  }

    (2.1) validateInput() 返回一个Bool值用来验证输入的值是否有效,确保getNumValue返回一个有效数值

       1:  function validateInput(inputstr) {
       2:      /// <summary>
       3:      /// validate a value
       4:      /// </summary>
       5:      /// <param name="inputstr"></param>
       6:      /// <returns type="">bool</returns>
       7:      flag = false;
       8:      if (inputstr != "") {
       9:          if (isNaN(inputstr)) {
      10:              flag = false; //如果输入字符不是数字
      11:          }
      12:          else {//输入数字但是小于0
      13:              if (parseFloat(inputstr) < 0)
      14:                  flag = false;
      15:              else
      16:                  flag = true;
      17:          }
      18:      }
      19:      return flag;
      20:  }

    2.3 处理javaScript中浮点数计算的出现的问题

       1:  $("#TotalSou").val(Number(totalSou.toFixed(4)));

    注:这里用Number(totalSou.toFixed(4))保留四位小数,但是其它单元格中输入超过四位小数时在此并没有做相应的处理。你也可以做进一改进,只传入合计控件ID和列的索引值写更少的代码。

    <summary>随笔,若有不足之处和好的建议,欢迎交流学习}</summary>

  • 相关阅读:
    解决 搭建Jekins过程中 启动Tomcat的java.net.UnknownHostException异常
    射手和农场主
    java 和 JS(javaScript)中的反斜杠正则转义
    分享修改密码的SharePoint Web part: ITaCS Change Password web part
    分享微软官方Demo用的SharePoint 2010, Exchange 2010, Lync 2010虚拟机
    Office 365 的公共网站的一些限制及解决的办法
    SharePoint 2013 关闭 customErrors
    安装 KB2844286 导致SharePoint 2010 XSLT web part 显示出现错误
    安装Office Web Apps Server 2013 – KB2592525安装失败
    如何将hyper-v虚拟机转换成vmware的虚拟机- 转换SharePoint 2010 Information Worker Demonstration and Evaluation Virtual Machine (SP1)
  • 原文地址:https://www.cnblogs.com/January/p/3013334.html
Copyright © 2011-2022 走看看