ホームページ >ウェブフロントエンド >jsチュートリアル >jquery はより優れたテーブル選択行を実現します color_jquery

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

WBOYオリジナル: 2016-05-16 16:54:321022ブラウズ

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> 

エフェクト表示:

声明：

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

前の記事：jqueryの各メソッド使用例sharing_jquery次の記事：jqueryの各メソッド使用例sharing_jquery

続きを見る

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

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

関連記事