JQuery DOM操作实例
Posted 张文琪2022
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery DOM操作实例相关的知识，希望对你有一定的参考价值。
这几天在公司一直在忙一些页面的工作，对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>
以上是关于JQuery DOM操作实例的主要内容，如果未能解决你的问题，请参考以下文章