jqery选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。 2、取消选中复选框时，所在行的背景色恢复。

白大仙儿

于 2019-10-26 19:50:15 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_45747808/article/details/102760349

js 专栏收录该内容

19 篇文章

订阅专栏

本文档展示了如何使用HTML创建一个包含姓名、月薪和年龄的表格，并利用jQuery进行美化和交互增强，如奇偶行样式区分及复选框点击事件。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table>
			<thead>
				<tr>
					<td>
						
						
					</td>
					<td>
						姓名
						
					</td>
					<td>
						月薪
						
					</td>
					<td>
						年龄
						
					</td>
				</tr>
				
			</thead>
			<tbody>
				<tr><td><input type="checkbox" /></td>
					<td>
						张三
						
					</td>
					<td>
						20000
						
					</td>
					<td>
						23
						
					</td>
					
					<td>
						李四
						
					</td>
					<td>
						23000
						
					</td>
					<td>
						24
						
					</td>
					
					<td>
						王五
						
					</td>
					<td>
						26000
						
					</td>
					<td>
						26
						
					</td>
					
				</tr>
				
				
			</tbody>
			
		</table>
		
		
		<script>
			
			$(function(){
				
				$("tbody>tr:even").addClass("even");
				$("tbody>tr:odd").addClass("odd");
				$(":checkbox").on("click",function(){
					
					$(this).parent().parent().toggleClass("checked");
				});
			});
			
		</script>
		
	</body>
</html>