Jquery中的表格换行颜色设置与复选框点击设置

最新推荐文章于 2022-01-14 17:24:01 发布

当年九月

最新推荐文章于 2022-01-14 17:24:01 发布

阅读量285

点赞数

分类专栏： web前端文章标签： jquery

by:探花

本文链接：https://blog.csdn.net/weixin_44376866/article/details/106838948

版权

本文介绍如何使用Jquery实现表格隔行换色以及复选框的全选和取消全选功能。通过建立表格，设置thead和tbody，利用jq的层级选择器按行数设置奇偶行颜色。同时，讲解了如何处理表头复选框与表格内复选框的同步状态。

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

2020-6-18
养生这个东西，不要等到身体出问题了，或者是上年纪了再去，而是年轻的时候就要开始保养，就像汽车一样
Jq完成表单隔行换色问题
思路：
1.建立一个表格三行四列
2.头部设置为单独的用tread 内容部分用
3.在script中写代码用层级选择器获取行数（偶数）或奇数
如果在样式中已经设置了css
可以直接添加某个行的类或者id

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script> 
					//1.加载主页面
					$(function(){
   
						//2.获取taboy里面的行
						$("tbody>tr:even").css("background-color","red")//3.获取偶数行并且设置红色
						
							$("tbody>tr:odd").css("background-color","yellow")//4.获取奇数行并且设置黄色
					});
		
		</script>
	</head>
	<body>
		<table border="1px" width="500px" height="200px" align="center">
			<thead>
					<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td