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

最新推荐文章于 2024-12-05 16:44:01 发布

当年九月

最新推荐文章于 2024-12-05 16:44:01 发布

阅读量324

点赞数

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

by:探花

本文链接：https://blog.youkuaiyun.com/weixin_44376866/article/details/106838948

版权

web前端专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>电话</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>18</td>
					<td>13163399562</td>
				</tr>
				<tr>
					<td>李白</td>
					<td>18</td>
					<td>15236542254</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>56</td>
					<td>3132684</td>
				</tr>
				<tr>
					<td>赵六</td>
					<td>23</td>
					<td>57226333333</td>
				</tr>
			</tbody>
		</table>
		
	</body>
</html>

使用jq完成全选和取消全选框

首选定义一个表格
首尾分离
首部设置框
点击首部选中状态则设置尾部全部为选中状态
1.加载页面
2.获取复选框并且设置获取下面的所有复选框的状态设置为和复选框的状态一致(this.checked)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="../js/jquery-1.8.3.min.js"> </script>
		<script>
		//1.加载页面
			$(function(){
		//2.获取复选框并且设置获取下面的所有复选框的状态设置为和复选框的状态一致
		$("#checkAll").click(function(){
			$(".checkOne").attr("checked",this.checked);	//注意为点击的状态一致  
		});
				
			});
		</script>
	</head>

	<body>
		<table border="1px" width="360px" height="150px" cellpadding="0px" cellspacing="0px" align="center">

			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox"  id="checkAll"/></th>
					<th>11</th>
					<th>12</th>
					<th>13</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>21</td>
					<td>22</td>
					<td>23</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>31</td>
					<td>32</td>
					<td>33</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>41</td>
					<td>42</td>
					<td>43</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" class="checkOne" />
					</td>
					<td>51</td>
					<td>52</td>
					<td>53</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>

练习：

在这里插入图片描述