jq表格的增加与删除

最新推荐文章于 2023-10-13 11:16:05 发布

Q_004

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量693

点赞数

分类专栏： jq 文章标签：表格的增加与删除

本文链接：https://blog.csdn.net/q_004/article/details/78436016

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>名单</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#table2{
				width: 800px;	
				border-collapse: collapse;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			function add(){//添加一行
				var name=$("#name").val();
				var age=$("#age").val();
				var address=$("#address").val();
				//创建一行
				$("#table2").append($("<tr><td><input type='checkbox' class='checkbox'/></td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td><a href='javascript:void(0)' οnclick='del(this)'>删除</a></td></tr>"));
			}
			function del(obj){//删除一行
				$(obj).parent().parent().remove();
			}
			var clicktime=1;
			function checkAll(){//全选
				var tr=$("#checkbox11");
				if(clicktime%2){
					for(var i=0;i<($("#table2 tr").length-1);i++){
					$("#table2 .checkbox")[i].checked=true;
				  }
				}
				else{
					for(var i=0;i<($("#table2 tr").length-1);i++){
					   $("#table2 .checkbox")[i].checked=false;
				    }
				}
				clicktime++;
			}
			function delAll(){//批量删除
            $("#table2 .checkbox:checked").parent().parent().remove();

			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>姓名<input type="text" id="name" /></td>
				<td>年龄<input type="text" id="age" /></td>
				<td>住址<input type="text" id="address" /></td>
				<td><input type="button" name="add" id="add" value="添加" οnclick="add()" /></td>
				<td><input type="button" name="add" id="add" value="批量删除" οnclick="delAll()" /></td>
			</tr>
		</table>
		<table id="table2" border="1">
			<tr>
				<th><input type="checkbox" name="" id="checkbox11" value="全选" οnclick="checkAll()"/></th>
				<th>姓名</th>
				<th>年龄</th>
				<th>住址</th>
				<th>操作</th>
				
			</tr>
			<tr>
				<th><input type="checkbox" class="checkbox"/></th>
				<td>张三</td>
				<td>13</td>
				<td>上海</td>
				<td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
			</tr>
		</table>
	</body>
</html>