jsp 根据输入 动态计算 和

页面根据各行各列输入值，自动计算总计

年级学校    总人数   女生   男生

A.1年级      12          6          6

A.2年级      14          8          6

A.3年级      15          6          9

A学校         41          20        21

B.1年级     12          6          6

B.2年级     13          6          7

B学校        25         12         13

1  jsp

  <table  id="dataForm">

<c:forEach items="dataList }" var="populace" varStatus="status">                        

<c:if test="${ "学校" = =populace.organType">

              <tr>

                         <td> <input name="${populace.schoolCode}"    value="${populace.schoolCode}" /></td>

                          <td> <input name="totalNum"  id="${populace.schoolCode}TotalNum"   value="${populace.totalNum}"  /></td>

                          <td><input name="girlNum"  id="${populace.schoolCode}GirlNum"   value="${populace.girlNum}"  /></td>

                         <td><input name="boyNum"  id="${populace.schoolCode}BoyNum"   value="${populace.boyNum}"   /></td>

               </tr>

</c:f>

<c:if test="${"年级" = =populace.organType}">

             <tr>

                         <td> <input name="${populace.classCode}"    value="${populace.classCode}" /></td>

                          <td> <input name="totalNum"  id="TotalNum${populace.organ}"   value="${populace.totalNum}"        onblur="pop.calSchoolNum('${populace..schoolCode}','TotalNum')" /></td>         ---onblur  失去焦点 时触发事件

                          <td><input name="girlNum"  id="GirlNum${populace.organ}"   value="${populace.girlNum}"  onblur="pop.calSchoolNum('${populace..schoolCode}','GirlNum')" /></td>

                         <td><input name="boyNum"  id="BoyNum${populace.organ}"   value="${populace.boyNum}"  onblur="pop.calSchoolNum('${populace..schoolCode}','BoyNum')" /></td>

               </tr>

</c:f> 

  </table>

2  js

    var pop = (function () {

           $(function () {

                initCal();

          })

           function  calSchoolNum(schoolCode , columnName ){

                 var schoolNum = 0;

                $("#dataForm") find("input[id^='" + columnName+ schoolCode+"']").each(function(i,value){   --input[id^=”ss“  id 以ss开头的所有input

                       schoolNum = schoolNum + Number($(this).val());

                 }) 

                 $("#"+schoolCode +columnName).val(schoolNum);    

            }

         

           function initCal() {

                   $("input").trigger("blur");    --页面初始化时自动触发让所有input失去焦点事件

            }

         return {

               calSchoolNum : calSchoolNum

         }

    }