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>