コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 17:24:05
オリジナル
1482 人が閲覧しました

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 ');
});
});
関連ラベル：
表格颜色 交替变化
ソース：php.cn
前の記事：JavaScript カスタム イベントの概要_JavaScript スキル 次の記事：Jquery は淘宝京東の複数条件フィルタリングを模倣し、ajax 読み込みと組み合わせることができます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
SASS スタイルはメディアクエリよりも優先されます メディアクエリを使用してデスクトップデバイスのスタイルをオーバーライドしようとしていますが、うまくいかないようです。 h2 要素に境界線の色を設定し、問題をよりわかりやすく視覚化す...
から 2024-04-05 15:03:00
0
1
3396
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
标题 标题 标题 标题
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ