JQuery DOM操作实例

张文琪2024

已于 2022-03-01 10:56:53 修改

阅读量484

点赞数

分类专栏： JavaWeb 文章标签： JQuery Table layui Table

于 2019-11-13 16:20:10 首次发布

本文链接：https://blog.csdn.net/zhengyikuangge/article/details/103051455

版权

JavaWeb 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

这几天在公司一直在忙一些页面的工作，对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>

张文琪2024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery DOM操作实例

这几天在公司一直在忙一些页面的工作，对jQuery的DOM操作有较深的印象，像元素遍历、选择器等<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" h...
复制链接

扫一扫

专栏目录