页面Table鼠标移动高亮显示

最新推荐文章于 2020-10-21 10:22:16 发布

最新推荐文章于 2020-10-21 10:22:16 发布 · 228 阅读

文章标签：

#高亮显示 jQuery

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格行高亮显示效果。当鼠标悬停在表格的某一行上时，该行会变为高亮状态，提高用户查看表格时的体验。此功能适用于多种网页应用场景。


 <table class="yellow_table highlight_rows" id="jsTable">
 <tr></tr>
       <tr></tr>
       <tr></tr>
    </table>

   <script>
        nav.highlightRows("jsTable");
     </script>


$(document).ready(function() {
	nav.highlightRows ();
});
var nav = {

       highlightRows : function(tableid) {
		$("#"+tableid+"").find("tbody tr:not('.table_footer')").hover(function() {
			$(this).addClass("highlight")  // highlight 为高亮显示的样式
		}, function() {
			$(this).removeClass("highlight")
		});
	}

}