这几天在公司一直在忙一些页面的工作，对jQuery的DOM操作有较深的印象，像元素遍历、选择器等
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<title>Test</title>
</head>
<script>
var num = /^[0-9]+$/;
$(function(){
bindEvent(1);
bindEvent(2);
bindEvent(3);
$("table tr:not(:first):not(:last)").each(function(){
var male_count = $(this).find("td").eq(1).find("input").val();
var female_count = $(this).find("td").eq(2).find("input").val();
if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
$(this).find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
}
})
calSum(1);
calSum(2);
calSum(3);
})
//绑定监听事件
function bindEvent(index){
$("table tr:eq("+index+") td:eq(1)").keyup(function(){
var male_count = $(this).find("input").val();
var female_count = $(this).next().find("input").val();
if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
$(this).parent().find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
}
calSum(1);
calSum(3);
})
$("table tr:eq("+index+") td:eq(2)").keyup(function(){
var male_count = $(this).prev().find("input").val();
var female_count = $(this).find("input").val();
if(male_count!="" && female_count!="" && num.test(male_count) && num.test(female_count)){
$(this).parent().find("td").eq(3).text(parseInt(male_count)+parseInt(female_count));
}
calSum(2);
calSum(3);
})
}
//计算合计
function calSum(index){
var sum = 0;
$("table tr:not(:first):not(:last)").each(function(){
var td_ = $(this).find("td").eq(index);
var count;
if(index == 3){
count = td_.text();
}else{
count = td_.find("input").val();
}
if(num.test(count)){
sum = sum + parseInt(count);
}
})
$("table tr:last td:eq("+index+")").text(sum);
}
</script>
<body>
<table class="layui-table" style="width:600px">
<colgroup>
<col width="150">
<col width="150">
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>班级号</th>
<th>男生数</th>
<th>女生数</th>
<th>总人数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"></td>
</tr>
<tr>
<td>1002</td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"></td>
</tr>
<tr>
<td>1003</td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"><input class="layui-input" value="50"/></td>
<td class="input-select-td"></td>
</tr>
<tr>
<td>总计</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
</script>
</body>
</html>
