点击修改表格背景色

使用Jquery事件实现点击修改表格的背景颜色

每列表格之前都有一个多选按钮，当你点击按钮时，这一行所有内容的背景色会发生改变，当你再次点击该多选按钮的时候，取消背景色。
未点击之前的样式
在这里插入图片描述
点击时候的样式

程序解读：使用table表格，每一行表格的第一个单元格都有一个多选按钮，
后几个单元格是内容，添加自己想要的样式效果。

看代码（注意一定要导入js文件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js"></script>
	</head>
	<style>
		
		tr td{
			border: 2px solid black;
			width: 150px;
			height: 30px;
		}
		
		.odd{
			background-color: antiquewhite;
		}
		
		.even{
			background-color: aquamarine;
		}
		
		.checked{
			background-color: yellow;
		}
		
	</style>
	<body>
		<table>
			<tr><td></td><td>姓名</td><td>薪水</td><td>年龄</td></tr>
			<tr><td><input type="checkbox"></td><td>张三</td><td>22000</td><td>21</td></tr>
			<tr><td><input type="checkbox"></td><td>李四</td><td>10000</td><td>25</td></tr>
			<tr><td><input type="checkbox"></td><td>王五</td><td>15000</td><td>23</td></tr>
			<tr><td><input type="checkbox"></td><td>赵六</td><td>12000</td><td>28</td></tr>
		</table>
	</body>
	<script>
		$(function(){
			$("tr:odd").addClass("odd");
			$("tr:even").addClass("even");
			$(":checkbox").on("click",function(){
				$(this).parent().parent().toggleClass("checked");
			});
			
		});
	</script>
</html>

来源：https://blog.csdn.net/weixin_45743799/article/details/102753216

标签

背景色

html表格