コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery はより優れたテーブル選択行を実現します color_jquery

jquery はより優れたテーブル選択行を実現します color_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 16:54:32
オリジナル
1088 人が閲覧しました

jqueryテーブルの選択された行の色（より良い効果）

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






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

















































































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


<script> <br>$(function(){ <br>////// /datagrid が選択されました 行の色が変わり、マウスが行の上を通過します /////////////// <br>var dtSelector = ".list" <br>var tbList = $(dtSelector); ; <br><br> tbList.each(function() { <br>var self = this; <br>$("tr:even:not(:first)", $(self)).addClass("normalEvenTD "); // ヘッダー行の次の行から始まる標準の奇数行から、行数: (1, 3, 5...) <br>$("tr:odd", $(self))。 addClass("normalOddTD"); // 標準より 先頭行の次の行から始まる偶数行目、行数: (2, 4, 6...) <br><br>// 行マウスを通過すると色が変わります <br>$("tr:not(:first)", $(self)).hover( <br>function () { $(this).addClass('hoverTD');$( this).removeClass('table-td-content'); }, <br>function ( ) { $(this).removeClass('hoverTD');$(this).addClass('table-td-content') ; } <br>); <br><br>// 選択した行の色が変わります<br> $("tr", $(self)).click(function (){ <br>var trThis = this; <br>$(self).find(".trSelected").removeClass('trSelected'); <br>if ($(trThis).get(0) == $("tr:first", $(self)) .get(0)){ <br>return; <br>} <br>$(trThis ).addClass('trSelected') <br>}); 🎜></script>


エフェクト表示:
関連ラベル：
jquery table
前の記事：jqueryの各メソッド使用例sharing_jquery 次の記事：テーブルを exls_jquery に変換するサンプルコード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
标题 标题 标题 标题
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ
データ データ データ データ