jQuery练习

于 2020-04-16 20:58:02 发布
阅读量118 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42609916/article/details/105566377
版权

表格数据操作

		<body>
		
		<style type="text/css">
			table,th,td{
				border: black 1px solid;
				border-collapse: collapse;
			}
			
		</style>
		<table>
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="datas">
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>18</td>
					<td>北京</td>
					<td>
						<a href="###">编辑</a>
						<a href="###">查看</a>
						<a href="###" onclick="deleteRow(this)">删除</a>
						<a href="###" onclick="copyRow(this)">复制</a>
					</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			function deleteRow(obj){
				if($("#datas").children().length==1){
					alert("必须有一条数据");
					return;
					
				}
				$(obj).parent().parent().remove();
			}
			
			function copyRow(obj){
				$("#datas").append($(obj).parent().parent().clone());
			}
		</script>
	</body>

全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			table{
				width: 80%;
				margin: 0 auto;
				border-spacing: 0;
				border-collapse: collapse;
				border:1px solid black;
			}
			
			th,td{
				border:1px solid black;
			}
			
			th{
				height: 45px;
				font-size: 15px;
			}
			
			td{
				height: 36px;
				font-size: 12px;
			}
			
			.checkbox-center{
				text-align: center;
			}
			
			table thead tr{
				color: white;
				background: black;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" title="全选"/></th>
					<th>姓名</th>
					<th>手机号</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Tom</td>
					<td>17719841280</td>
					<td>中国北京海淀</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Lucy</td>
					<td>12467890987</td>
					<td>中国天津</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center"><input type="checkbox"/></td>
					<td>Timmy</td>
					<td>18879670987</td>
					<td>中国河南郑州</td>
					<td>查看 编辑 删除</td>
				</tr>
				<tr>
					<td class="checkbox-center" ><input type="checkbox"/></td>
					<td>Lily</td>
					<td>16623459087</td>
					<td>中国吉林长春</td>
					<td>查看 编辑 删除</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			$("tbody tr:nth-of-type(even)").css("background","gray");//偶数行
			$("tbody tr:nth-of-type(odd)").css("background","#ffffff");//奇数行
			
			$("tbody tr").hover(function(){
				this.style.backgroundColor="red";
			},function(){
				$("tbody tr:nth-of-type(even)").css("background","gray");//偶数行
				$("tbody tr:nth-of-type(odd)").css("background","#ffffff");//奇数行
			});
			
			$("thead tr th [type='checkbox']").click(function(){
				$("tbody tr td [type='checkbox']").prop("checked",this.checked);
				/*不可用的方法$(e).attr("checked")，与复选框状态无关，只与checked是否在HTML标签中出现有关。
				若不出现(无论复选框状态是否选中)，返回undefined。
				若checked在HTML开始标签中出现(无论复选框是否选中)，返回checked。
				(只要checked在开始标签中出现，值为何已经不重要了)*/
				console.log($("tbody tr td [type='checkbox']"));
			})
			
			$("tbody tr td [type='checkbox']").bind("click",function(){
				$("thead tr th [type='checkbox']").attr("checked",$("tbody tr td [type='checkbox']").length==$("tbody tr td [type='checkbox']:checked").length);
				console.log($("tbody tr td [type='checkbox']").length);
				console.log($("tbody tr td [type='checkbox']:checked").length);
			})
			
		</script>
	</body>
</html>
诗里有清风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery练习
冰零0o的博客
06-06 922
需要的jquery库：核心库：jquery-1.8.3.js校验库：jquery.validate.js中文校验库：messages_zh.js下载地址：https://download.csdn.net/download/weixin_42072596/104618051、省市二级联动&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;m...
前端jquery练习网页
10-12
学生时代做的jquery网页，无后台，有bug
jquery练习
12-16
jquery练习
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
jQuery练习题
发则韩的博客
01-01 534
jQuery重写隔行换色.html jQuery弹广告动态隐藏和消失.html 省市联动.html
JQuery练习题1
05-10
jQuery练习题1
JQuery练习集合
02-05
JQuery练习集合 包括：节点遍历、节点替换、链式编程、链式each、选择过滤器、相对选择器、球队选择、属性选择器等等例子
Jquery部分效果练习
07-01
新人，最近练习的一些jquery实现的前端效果
jquery练习实例
10-16
里面有几个jquery的实例，还有一部分方法
练习 | JQuery基本练习
虎鲸虎鲸
02-17 778
文章目录题1：点击图片放大显示题2：滑动门题3：数据管理操作题4：轮播图题5：动画下拉菜单栏题6：手风琴 题1：点击图片放大显示 点击图片列表中的某个元素，该图片放大显示 解 思路： 1.点击图片，放大指定图片，容器可见；需要设置阻止事件冒泡 2.点击其他区域，容器不可见 完整代码见 GitHub <!-- html代码 --> <div class="g-index"...
JQuery基础练习
qq_39095899的博客
04-03 251
Jquery练习 基本选择器练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery基本选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript" c...
jQuery 操作 练习题
supreme_yes的博客
04-25 2408
1.添加a的属性标签 划入显示 划出隐藏 滑动时跟随鼠标代码：JS原生&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/c
jQuery小练习1
C.
11-14 431
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="Java
1.jQuery练习1 ---表单
李天下
06-03 606
要做一个效果如图所示的表单 &amp;amp;lt;form action=&amp;quot;&amp;quot;&amp;amp;gt; &amp;amp;lt;filedset&amp;amp;gt; &amp;amp;lt;legend&amp;amp;gt;个人基本信息&amp;amp;lt;/legend&amp;amp;gt; &amp;amp;lt;div
jquery练习2:验证贵美网站注册页面
最新发布
01-02
我们可以使用jQuery来实现这一功能。首先，我们可以编写一个jQuery函数，当用户点击注册按钮时触发。在这个函数中，我们可以获取用户输入的用户名、密码、邮箱等信息，并对其进行验证。 我们可以使用正则表达式来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值