jquery示例五

最新推荐文章于 2024-07-19 03:20:06 发布

水莲

最新推荐文章于 2024-07-19 03:20:06 发布

阅读量103

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44374239/article/details/107880656

版权

该博客展示了使用jQuery实现的各种动画效果，包括淡入淡出、滑动等，适合前端开发者参考学习。

摘要由CSDN通过智能技术生成

效果如下：
在这里插入图片描述

<!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();
				//创建一行
				var trObj = $("<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>")
				//获得tbody的id名mytb在创建一行
				$("#mytb").append(trObj);
			}
			
			
			
			function del(obj) {//删除一行
				$(obj).parent().parent().remove();
			}
			// 先 全选， 再删除

			function checkAll(obj) {
				var states = $(obj).prop("checked");

				if(states == 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>30</td>
					<td>郑州</td>
					<td>
						<a href="javascript:void(0)" onclick="del(this)">删除</a>
					</td>
				</tr>
			</tbody>

		</table>
	</body>

水莲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫