控制表格行的高亮显示

最新推荐文章于 2021-06-08 00:31:21 发布

javaScript小主

最新推荐文章于 2021-06-08 00:31:21 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_45683093/article/details/103225758

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制表格行的高亮显示</title>
		<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<style>
			.selected{background-color: pink;}
		</style>
		<table border="1" align="center">
			<caption>JavaScript系列图书</caption>
			<thead bgcolor="#B2B2B2" align="center" valign="bottom">
				<tr>
					<th>书名</th>
					<th>出版单位</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td width="185">JavaScript</td>
					<td width="220">吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript自学</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript程序设计</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript开发基础</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JQuery</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
			</tbody>
			<script>
				$(function(){
					$("tbody>tr").click(function(){
					//使鼠标单击的行高亮显示,并且清除其兄弟元素的高亮显示
						$(this).addClass("selected").siblings().removeClass("selected");
					})
				})
			</script>
		</table>
	</body>
</html>