angularJs表格添加删除

最新推荐文章于 2024-07-25 16:05:51 发布

神秘的玖零

最新推荐文章于 2024-07-25 16:05:51 发布

阅读量362

点赞数

文章标签： android

本文链接：https://blog.csdn.net/zihang0814/article/details/78322242

版权

angularJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	table{
	border-collapse: collapse;
	margin-top:50px;
	}
	th,td{
	width: 80px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border:1px solid #000;
	}
	</style>
	</head>
	<body>
	<input type="text" value="zs">姓名
	<input type="text" value="20">年龄
	<input type="text" value="女">性别
	<button type="button" class="tj">提交</button><br/>
	<table>
	<thead>
	<tr>
	<th><inputtype="checkbox"class="checkAll">全选</th>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<!--<tr>
	<td><input type="checkbox"></td>
	<td>zs</td>
	<td>20</td>
	<td>nan</td>
	<td><button>删除</button></td>
	</tr>-->
	</tbody>
	</table>
	<script>
	//计数器
	var n=0;
	$(".tj").click(function(){
	var name=$("input").eq(0).val();
	var age=$("input").eq(1).val();
	var sex=$("input").eq(2).val();
	var add="<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td><td><button>删除</button></td></tr>"
	$("table").append(add);
	});
	/*$("tbody button").click(function(){
	alert(0)
	})*/
	$("tbody").on("click","button",function(){
	$(this).parents("tr").remove();
	});
	//点击全选，下面的全部选择
	$(".checkAll").click(function(){
	//console.log($(this).prop("checked"));
	if($(this).prop("checked")==true){
	$("tbody input").prop("checked",true);
	}else{
	$("tbody input").prop("checked",false);
	}
	});
	//下面的选择点击
	$("tbody").on("click","input",function(){
	if($(this).prop("checked")==true){
	n++;
	}else{
	n--;
	}
	if(n==$("tbody input").length){
	$(".checkAll").prop("checked",true);
	}else{
	$(".checkAll").prop("checked",false);
	}
	});


	</script>
	</body>
	</html>