ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery は、色の変更の上にマウスを移動するとテーブルの色が交互に変更されるように実装します。

Jquery は、色の変更の上にマウスを移動するとテーブルの色が交互に変更されるように実装します。

WBOYオリジナル: 2016-05-16 17:24:051526ブラウズ

Jquery はテーブルの色を交互に実装します。次のようにクリックして行を選択し、色の変更効果の上にマウスを移動します。
ソースコード (デモ) パッケージのダウンロード Jquery は、色の変更の上にマウスを移動するとテーブルの色が交互に変更されるように実装します。
HTML コードは次のとおりです。 :

コードをコピーコードは次のとおりです:

align="center" cellpadding="0" cellpacing="1 " bgcolor="#c0de98">

table-row-1.0.js

复制代码代码如下:

 
$(document).ready(function(){ 
///////Datagrid の選択された行の色が変わり、マウスが行の上を通過します //////////// /// / 
var dtSelector = ".list"; 
var tbList = $(dtSelector); 

tbList.each(function() { 
var self = this; 
$( "tr:​​even:not(:first)", $(self)).addClass("normalEvenTD"); // ヘッダー行の次の行から始まる奇数行目、行数: (1 , 3, 5... ) 
$("tr:odd", $(self)).addClass("normalOddTD"); // ヘッダー行の次の行から始まる偶数行目、number行: (2, 4, 6... ) 

//マウスが通過した行の色が変わります
$("tr:not(:first)", $(self)).hover ( 
function () { $(this).addClass ('hoverTD');$(this).removeClass('table-td-content'); }, 
function () { $(this). RemoveClass('hoverTD');$(this).addClass( 'table-td-content'); } 
); 

//選択した行の色が変わります
$("tr", $(self)).click(function (){ 
 var trThis = this; 
$(self).find(".trSelected").removeClass('trSelected'); 
if ($( trThis).get(0) == $("tr:first ", $(self)).get(0)){ 
return; 
} 
$(trThis).addClass('trSelected '); 
}); 
});

声明：

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

前の記事：JavaScript カスタムイベントの概要_JavaScript スキル次の記事：JavaScript カスタムイベントの概要_JavaScript スキル

続きを見る

标题	标题	标题	标题
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ
データ	データ	データ	データ

Jquery は、色の変更の上にマウスを移動するとテーブルの色が交互に変更されるように実装します。

関連記事