jQuery プラグインは、テーブルのインターレース色の変更とマウスオーバーのハイライト効果を実装します code

jQuery プラグインは、テーブルのインターレース色の変更とマウスオーバーのハイライト効果を実装します code_jquery

WBOY

リリース： 2016-05-16 15:13:25

オリジナル

1449 人が閲覧しました

この記事の例では、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>

ログイン後にコピー

さらに jQuery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「JQuery ドラッグ効果とテクニックの概要」、「jQuery 拡張テクニックの概要」をチェックしてください。、「jQuery共通古典特撮まとめ」、「jQueryアニメーション・特撮使い方まとめ」、「jQueryセレクター使い方まとめ」、「jQuery」一般的なプラグインと使い方のまとめ》

この記事が jQuery プログラミングのすべての人に役立つことを願っています。