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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:13 PM

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>

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7742

Java チュートリアル

1643

CakePHP チュートリアル

1397

Laravel チュートリアル

1291

PHP チュートリアル

1233

Related knowledge

Edge ブラウザがこのプラグインをサポートしない理由に対する 3 つの解決策を共有します Mar 13, 2024 pm 04:34 PM

ユーザーが Edge ブラウザを使用する場合、より多くのニーズを満たすためにいくつかのプラグインを追加する場合があります。しかし、プラグインを追加すると、このプラグインはサポートされていないと表示されます。この問題を解決するにはどうすればよいですか?今日は編集者が 3 つの解決策を紹介しますので、ぜひ試してみてください。方法 1: 別のブラウザを使用してみてください。方法 2: ブラウザ上の Flash Player が古いか見つからないため、プラグインがサポートされていない可能性があり、公式 Web サイトから最新バージョンをダウンロードできます。方法3：「Ctrl+Shift+Delete」キーを同時に押します。「データを消去」をクリックしてブラウザを再度開きます。

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか? Mar 08, 2024 am 08:55 AM

Chrome プラグイン拡張機能のインストールディレクトリとは何ですか?通常の状況では、Chrome プラグイン拡張機能のデフォルトのインストールディレクトリは次のとおりです。 1. WindowsXP での Chrome プラグインのデフォルトのインストールディレクトリの場所: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Windows7 の chrome プラグインのデフォルトのインストールディレクトリの場所: C:\Users\username\AppData\Local\Google\Chrome\User

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Google Chrome でアニメーションプラグインを実行できる仕組み Mar 28, 2024 am 08:01 AM

Google Chrome ではどのようにしてアニメーションプラグインを実行できるようになりますか? Google Chrome は非常に強力です。多くの友人はビデオアニメーションを見るためにこのブラウザを使用するのが好きです。ただし、さまざまなアニメーションビデオを見たい場合は、ブラウザにアニメーションプラグインをインストールする必要があります。多くの友人は Google Chrome を使用しています。アニメーションプラグインを入れても動画が見れないのですが、どうすればいいでしょうか？次に、アニメーションプラグインを Google Chrome で実行できるようにするための具体的な手順をエディターに示します。興味のある友人は、見に来てください。 Google Chrome でアニメーションプラグインの実行を許可する具体的な手順: 1. まず、コンピュータで Google Chrome を実行し、ホームページの右上隅にあるメインメニューボタンをクリックします (図を参照)。 2. メインメニューを開いた後、下の「設定」オプションを選択します (図を参照)。 3. 設定で

jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック