页面根据各行各列输入值,自动计算总计
年级学校 总人数 女生 男生
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}" οnblur="pop.calSchoolNum('${populace..schoolCode}','TotalNum')" /></td> ---onblur 失去焦点 时触发事件
<td><input name="girlNum" id="GirlNum${populace.organ}" value="${populace.girlNum}" οnblur="pop.calSchoolNum('${populace..schoolCode}','GirlNum')" /></td>
<td><input name="boyNum" id="BoyNum${populace.organ}" value="${populace.boyNum}" οnblur="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
}
}