JQuery+CSS实现隔行变色以及高亮

最新推荐文章于 2022-04-27 19:40:20 发布

原创最新推荐文章于 2022-04-27 19:40:20 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #jQuery #ViewUI

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用jQuery为表格行添加不同背景颜色的方法，并实现了鼠标悬停时改变样式的交互效果。通过添加类名实现对表格偶数行、奇数行及鼠标悬停状态的样式区分。

table tbody tr.even td{
	background:#ADD8E6;
}
table tbody tr.odd td{
	background:#EEF5FB;
}

table tbody tr.msov td{
	background:#FFFF99;
}


$(document).ready(function () {
	$("table tbody tr:even").addClass("even");
	$("table tbody tr:odd").addClass("odd");

	$("table tbody tr").mouseover(function () {
		$(this).addClass("msov").mouseout(function () {
			$(this).removeClass("msov");
		});
	});
});