首頁 > 開發者 > JavaScript
jQuery外掛程式實現表格隔行變色及滑鼠滑過高亮顯示效果代碼，jquery高亮顯示
本文執行個體講述了jQuery外掛程式實現表格隔行變色及滑鼠滑過高亮顯示效果的方法。分享給大家供大家參考，具體如下：
此外掛程式旨在實現表格隔行變色，且滑鼠移動在表格的某一行上時，該行能高亮顯示。整體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格隔行變色且滑鼠滑過高亮顯示</title><style>table{border-collapse:collapse;border:none;width:20%;}table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}.evenRow{background:#f0f0f0;}.oddRow{background:#ff0;}.activeRow{background:#f00;color:#fff;}</style><script type="text/javascript" src="jquery-1.7.1.js"></script></head><body><script>/** tableUI 0.1* 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替，滑鼠移上高亮顯示* Dependence jquery-1.7.1.js*/ ;(function($){ $.fn.tableUI = function(options){ //經常用options表示有許多個參數 //各種屬性、參數 建立一些預設值，拓展任何被提供的選項 var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow" }; var obj = $.extend(defaults,options); this.each(function(){ //this關鍵字代表了這個外掛程式將要執行的jQuery對象 此處沒有必要將this包在$號中如$(this)，因為this已經是一個jQuery對象。 $(this)等同於 $($('#element')); //外掛程式實現代碼 var thisTable = $(this); //擷取當前對象 此時this關鍵字代表一個DOM元素 我們可以alert列印出此時的this代表的是object HTMLTableElement //添加奇偶行顏色 $(thisTable).find("tr:even").addClass(obj.evenRowClass); $(thisTable).find("tr:odd").addClass(obj.oddRowClass); //添加活動行顏色 $(thisTable).find("tr").mouseover(function(){ $(this).addClass(obj.activeRowClass); }); $(thisTable).find("tr").mouseout(function(){ $(this).removeClass(obj.activeRowClass); }); }); };})(jQuery);//在這個封閉程式中，我們可以無限制的使用$符號來表示jQuery函數。</script><table cellpadding="0" cellspacing="0"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr></table><script>$(function(){ $("table").tableUI(); })</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
