jQuery 实现表格列合计

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

1.编写html

<table id="table-fund">
       <caption class="table-caption-legend">
           (单位：万元)</caption>
       <thead>
           <tr>
               <th colspan="3">经费到位情况</th>
           </tr>
           <tr>
               <th>科目
               </th>
               <th>预算数</th>
               <th>到位数</th>
           </tr>
       </thead>
       <tr>
           <td>1.省科技经费
           </td>
           <td>
               <input id="SouProSciTech" type="text" />
           </td>
           <td>
               <input id="ProSciTechAvailable" type="text" /></td>
       </tr>
       <tr>
           <td>2.单位自筹
           </td>
           <td>
               <input id="SouUnitSelfFinanc" type="text" />
           </td>
           <td>
               <input id="UnitSelfFinancAvailable" type="text" /></td>
       </tr>
       <tr>
           <td>3.银行贷款
           </td>
           <td>
               <input id="SouBankloans" type="text" />
           </td>
           <td>
               <input id="BankloansAvailable" type="text" /></td>
       </tr>
       <tr>
           <td>
               <span class="totall">合</span><span class="totall">计</span>
           </td>
           <td>
               <input id="TotalSou" readonly="readonly" type="text" />
           </td>
           <td>
               <input id="TotalSouAvailable" readonly="readonly" type="text" />
           </td>
       </tr>
   </table>

 

2. Script实现

  2.1 为每个input绑定事件

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

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

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

2.2 实现合计

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

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

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

function getNumValue(controlid) {
    /// <summary>
    /// Get a number from input tag which type is text
    /// </summary>
    /// <param name="controlid">id of input control</param>
    /// <returns type="">float or 0</returns>
    var num = controlid.val();
    if (validateInput(num)) {
        num = parseFloat(num);
    }
    else {
        controlid.val("");
        num = 0;
    }
    return num;
}

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

function validateInput(inputstr) {
    /// <summary>
    /// validate a value
    /// </summary>
    /// <param name="inputstr"></param>
    /// <returns type="">bool</returns>
    flag = false;
    if (inputstr != "") {
        if (isNaN(inputstr)) {
            flag = false; //如果输入字符不是数字
        }
        else {//输入数字但是小于0
            if (parseFloat(inputstr) < 0)
                flag = false;
            else
                flag = true;
        }
    }
    return flag;
}

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

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

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

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