jQuery实现全选、全不选

最新推荐文章于 2022-12-14 04:53:34 发布

小小白号

最新推荐文章于 2022-12-14 04:53:34 发布

阅读量608

点赞数 1

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/WiseGirls/article/details/109605860

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

全选的操作

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="jquery.min.js"></script>
	<style>
		table{
			border-collapse: collapse;
			background-color: #A4A4A4;
		}
		table .title{
			background-color: royalblue;
			color: white;
		}
		table td a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	<input type="button" id="int" value="添加内容"/>
	<table border="1" cellpadding="10">
		<tr class="title">
			<th>课程名称</th>
			<th>所属学院</th>
			<th>已学会</th>
		</tr>
		<tr>
			<td>javaScript</td>
			<td>前端与移动开发学院</td>
			<td><a href="javascript:;">GET</a></td>
		</tr>
		<tr>
			<td>css</td>
			<td>前端与移动开发学院</td>
			<td><a href="javascript:;">GET</a></td>
		</tr>
		<tr>
			<td>html</td>
			<td>前端与移动开发学院</td>
			<td><a href="javascript:;">GET</a></td>
		</tr>
		<tr>
			<td>jQuery</td>
			<td>前端与移动开发学院</td>
			<td><a href="javascript:;">GET</a></td>
		</tr>
	</table>
	<div class="box">
		
	</div>
</body>
<script>
	function f1(){		
		$("td a").click(function(){
			$(this).parent().parent().remove();
		});
	}
	f1();
	$("#int").click(function(){
		var html=`
		<input type="text" class="txt1">
		<input type="text" class="txt2">
		<input type="button" value="添加" class='btn'>
		`;
		$(".box").html(html);
		$(".btn").click(function(){
			var txt1=$(".txt1").val();
			var txt2=$(".txt2").val();
			if(txt1!="" && txt2!=""){
				var tr="<tr><td>"+txt1+"</td><td>"+txt2+"</td><td><a href='javascript:;'>GET</a></td></tr>";
				$("table").append(tr);
				$(".box").html('');
				f1();
			}else{
				alert("内容不得为空");
			}
		});
	})
</script>
</html>

小小白号

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选、全不选

全选的操作<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></titl
复制链接

扫一扫