jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼

更新時間：2016年02月25日 11:45:09 作者：小壞

這篇文章主要介紹了jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼,涉及jQuery針對頁面元素動態(tài)操作及響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery插件實現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果的方法。分享給大家供大家參考，具體如下：

此插件旨在實現(xiàn)表格隔行變色，且鼠標(biāo)移動在表格的某一行上時，該行能高亮顯示。整體代碼如下：

<!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>表格隔行變色且鼠標(biāo)滑過高亮顯示</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可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替，鼠標(biāo)移上高亮顯示
* Dependence jquery-1.7.1.js
*/ 
;(function($){
  $.fn.tableUI = function(options){ //經(jīng)常用options表示有許多個參數(shù) 
  //各種屬性、參數(shù)  創(chuàng)建一些默認(rèn)值，拓展任何被提供的選項
  var defaults = {
    evenRowClass:"evenRow",
    oddRowClass:"oddRow",
    activeRowClass:"activeRow" 
    };
  var obj = $.extend(defaults,options);
  this.each(function(){ //this關(guān)鍵字代表了這個插件將要執(zhí)行的jQuery對象  此處沒有必要將this包在$號中如$(this)，因為this已經(jīng)是一個jQuery對象。  $(this)等同于 $($('#element'));
    //插件實現(xiàn)代碼
    var thisTable = $(this); //獲取當(dāng)前對象  此時this關(guān)鍵字代表一個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函數(shù)。
</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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: