Jqueryはテーブルスタイルのsetting_jqueryを実装します

前の記事では、jquery を使用してチェックボックスの全選択を実装しました。私はプラグインの定義についてよくわかっていなかったので、読んでみてはと勧めてくれた友人もいました。正直に言うと、私はそれを見ていました。まだまだ勉強中なので、プロジェクトでよく使われるjqueryのエフェクトを一般的なメソッドにまとめて、みなさんのご協力で改良したり、やり方がわからない人にもメソッドを知ってもらいたいと思っています。最後に、将来の使用を容易にするために独自の Jquery メソッドを作成します。これらの例はすべて参照せずに私が書いたものであるため、改善が必要な部分がたくさんあります。

1: このメソッドを作成する理由

プロジェクトでは、スタイルを美しくするためにいくつかのテーブルにスタイルを設定する必要があります。テーブルのヘッダーには 1 つのスタイルがあり、奇数番号の行には 1 つのスタイルがあり、偶数番号の行には 1 つのスタイルがあります。マウスが上を通過すると色が変わり、マウスが離れると色が戻ります。

2: 実装プロセス

js ファイル xs_table_css.js

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

$(document).ready(function () {
var xs_table_css = "xs_table" //テーブル css を取得します
; var xs_table_th_css = "xs_table_th" //テーブルの th スタイル
; var xs_table_even_css = "xs_table_even" //テーブル css
の偶数行 var xs_table_odd_css = "xs_table_odd" //テーブル css
の奇数行 var xs_table_select_css = "xs_table_select" //テーブル選択行スタイル
; var xs_table = "xs_table_css;
$(xs_table).each(function () {
$(this).children().children().has("th").addClass(xs_table_th_css); //Header
var tr_even = $(this).children().children(":even").has("td"); //偶数行のデータ
var tr_odd = $(this).children().children(":odd").has("td"); // 奇数番号のデータ行
tr_even.addClass(xs_table_even_css);
tr_odd.addClass(xs_table_odd_css);
tr_even.mouseover(function () {
$(this).removeClass(xs_table_even_css);
$(this).addClass(xs_table_select_css);
});
tr_even.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_even_css);
});
tr_odd.mouseover(function () {
$(this).removeClass(xs_table_odd_css);
$(this).addClass(xs_table_select_css);
});
tr_odd.mouseout(function () {
$(this).removeClass(xs_table_select_css);
$(this).addClass(xs_table_odd_css);
});
});
});

スタイル ファイル xs_table.css

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

.xs_table
{
}
.xs_table_th
{
高さ: 50px;
背景色: #C0C0C0;
}
.xs_table_even
{
高さ: 50px;
背景色: #F0F0F0;
}

.xs_table_odd
{
高さ: 50px;
背景色: #FFFFFF;
}
.xs_table_select
{
高さ: 50px;
背景色: #D9D9D9;
}

ページファイル xs_table_css.htm

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">
<頭>
   
   
   
   


<テーブルクラス="xs_table" width="800px">
<本体>
headoneheadTwo
gt;最初の行

二行目222222222
第三行333333333
第四行444444444






<テーブルクラス="xs_table" width="800px">
headone headTwo
gt;最初の行

二行目 222222222
第三行 333333333
第四行 444444444

3：方法说説明

（1）mouseoverとmouseout要先移除上次のcss、不会出现样式叠加

（2）找時注意tbody,虽然页面上不有tbody标签，但是默认会有这个子元素

（3）奇偶行要去去，只找td的