JQuery表格高亮

最新推荐文章于 2022-07-20 23:20:46 发布

淡淡忧愁

最新推荐文章于 2022-07-20 23:20:46 发布

阅读量987

点赞数

分类专栏： jQuery 文章标签： jquery js

本文链接：https://blog.csdn.net/zzx252373003/article/details/10896721

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

经过一段时间对JS和JQuery的学习，自己写了一个表格高亮的例子。

HTML：

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>例子</title>
<script src="jquery-1.10.2.min.js"></script>


</head>
<body>
<table class="mytable">
	<tr>
		<td>haohao</td>
		<td>haohao</td>
		<td>haohao</td>
		<td><a href="#" data-toggle="popover" title="详情">查看</a></td>
	</tr>
	<tr class="even">
		<td>haohao</td>
		<td>haohao</td>
		<td>haohao</td>
		<td><a href="#" data-toggle="popover" title="详情">查看</a></td>
	</tr><tr>
		<td>haohao</td>
		<td>haohao</td>
		<td>haohao</td>
		<td><a href="#" data-toggle="popover" title="详情">查看</a></td>
	</tr>
	<tr class="even">
		<td>haohao</td>
		<td>haohao</td>
		<td>haohao</td>
		<td><a href="#" data-toggle="popover" title="详情">查看</a></td>
	</tr>
</table>
</body>

</html>

style：

* {padding:0;margin:0;}
.mytable {border-collapse:collapse;}
.mytable td {border:1px solid #ddd;padding:4px 10px;}
.mytable .even {background-color:#eee;}
.mytable .now {background-color:#ddd;}

JQuery：

$(function () {
	tableNow ();
})

function tableNow () {
	$('.mytable tr').mouseover(function () {
		var self = $(this);
		self.addClass('now').siblings().removeClass('now');
	})
	$('.mytable tr').mouseout(function () {
		var self = $(this);
		self.removeClass('now');
	})
}

是不是很简单。