jQuery小练习

最新推荐文章于 2022-03-26 23:22:05 发布

wzw_jiexika

最新推荐文章于 2022-03-26 23:22:05 发布

阅读量213

点赞数

分类专栏：练习题文章标签： jquery

本文链接：https://blog.csdn.net/wzw_jiexika/article/details/107919741

版权

练习题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery 反选全选框、添加、批量删除

反选框&全选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>奇数偶数 和 全选 /反选</title>
		<script type="text/javascript" src="js/jquery1.11.3.min.js" ></script>
		<script>
			function checkAll(){
				$("td input").each(function(){
					$(this).prop("checked","checked");
				});
			}
			
			function reverseCheck(){
				$("td input").each(function(){
					var val = $(this).prop("checked");
					$(this).prop("checked",!val);
				});
			}
		</script>
	</head>
	<body>
		<table border="1" width="600">
			<tr>
				<td><input type="checkbox" value="1"></td>
				<td>王昭君</td>
				<td>250</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="2"></td>
				<td>西施</td>
				<td>100</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="3"></td>
				<td>貂蝉</td>
				<td>30</td>
			</tr>
			<tr>
				<td><input type="checkbox" value="4"></td>
				<td>杨玉环</td>
				<td>1000</td>
			</tr>
		</table>

		<input type="button" value="全选" onclick="checkAll()">
		<input type="button" value="反选" onclick="reverseCheck()">
	</body>
</html>

添加&批量删除

<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
     <script>
		function add(){
		var realName=$("#realName").val();
		var age=$("#age").val();
		var address=$("#address").val();
		
		$("#mytb").append("<tr><td><input type=\"checkbox\"></td><td>"+realName+"</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();
			
		}
		
		function checkAll(obj){
			
		var choose=$(obj).prop("checked");
		if(choose==true){
			$("tbody input").prop("checked", true);
		}else{
			$("tbody input").prop("checked", false);
		}
			
		}
		
		function delBatch(){
			$("tbody input:checked").parent().parent().remove();
			
		}
		
		</script>
	</head>

	<body>
		<table>
			<tr>

				<td>姓名：<input id="realName" name="realName" type="text"></td>
				<td>年龄：<input id="age" name="age" type="text"></td>
				<td>地址：<input id="address" name="address" type="text"></td>
				<td><input value="添加" type="button" onclick="add()">
					<input value="批量删除" type="button" onclick="delBatch()">
				</td>
			</tr>
		</table>
		<table border="1">
			<thead>
				<tr>
					<td><input id="checkall" type="checkbox" onchange="checkAll(this)"></td>
					<td>姓名</td>
					<td>年龄</td>
					<td>地址</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody id="mytb">
				<tr>
					<td><input type="checkbox"></td>
					<td>杰西卡</td>
					<td>20</td>
					<td>郑州</td>
					<td>
						<a href="javascript:void(0)" onclick="del(this)">删除</a>
					</td>
				</tr>
			</tbody>

		</table>
	</body>

</html>