Jquery に基づくテーブルの代替行の色変更、モバイルの色変更、クリック色の変更 plug-in_jquery

レンダリング:

次のように JQUERY プラグインを作成します:

コードをコピーします コードは次のとおりです。以下のように:

;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//デフォルト値を設定する
option=$.extend ({
odd:"odd",
even:"even",
selected:"selected"
},options);上記の function(options) と同じです option は同じオブジェクトです
//1 行おきに色を変更します
$("tbody>tr:enev",this).addClass(option.even); 🎜>$("tbody>tr:odd",this) .addClass(option.odd);
//行をクリックして色を変更します
$('tbody>tr',this).click(function (){
var hasSelected = $(this).hasClass( option.selected);
$(this)[hasSelected?"removeClass":"addClass"](option.selected)
.find( ":checkbox").attr('checked',!hasSelected);
$("tbody>tr:has(:checked)",this).addClass(option.selected); 🎜>return this; //メソッドをチェーン可能にするために return this します
})(jQuery);


2. JQUERY プラグインを適用します🎜>

コードをコピー

コードは次のとおりです: $(function(){ / /デフォルトクラスに従って $("#table2").alterBgColor() .find("th").css("font-size","18")

//カスタムクラス、指定された値;

$("#table1").alterBgColor({
odd:"odd1",
even:"even1",
selected:"mselected"
}) .find("th").css("font-size","18");
})


3. 2 つの異なるテーブル構造:

コードをコピー

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

 




頭>

姓	姓别	暂住地
	王锋	男	北京海淀区家河
	王兴	女	河北石家庄
	李明	男	北京昌平区回龙观
	程子	男	北京西城区
	赵垛稳	男	北京海淀区上地
	陈曦	女	北京海淀区万泉庄

 




頭>

姓	姓别	暂住地
	王锋	男	北京海淀区家河
	王兴	女	河北石家庄
	李明	男	北京昌平区回龙观
	程子	男	北京西城区
	赵垛稳	男	北京海淀区上地
	陈曦	女	北京海淀区万泉庄

四、样式如下：

复制代 代码如下:

🎜>これで終わります。皆さんにコメントを残していただければ幸いです。ありがとうございます。
わからない場合は、私に連絡してください (Wang Feng QQ: 155259396)。

。

コードをコピーします コードは次のとおりです: (function($){

$.fn.extend({

" SetTableBgColor":function(options) {
//デフォルトのスタイル値を設定します
option=$.extend({
odd:"odd",//奇数行
even:"even", //偶数行
選択 :"selected",//選択行
over:"over"//マウスを上に移動すると
}, options);//ここでのオプションは以下と同じオブジェクトです関数内のパラメータ
// 交互の行の色を変更します
$("tbody>tr:even",this).addClass(option.even);
$("tbody>tr:odd") ,this).addClass(option.odd);
// 行をクリックして色を変更します
$("tbody>tr",this).click(function(){
$("tbody> tr").removeClass(option.selected);
//var hasSelected=$(this).hasClass(option.selected);//クリック状態のスタイルが含まれているかどうかを問い合わせるために true または false を返します
$(this).addClass(option.selected);//Give 選択した行にスタイルを追加します [hasSelected?"removeClass":"addClass"] スタイルが含まれているかどうかに応じて、スタイルを削除および追加します
}); 🎜>//マウスが上に移動すると色を変更します
$("tbody>tr",this ).mouseover(function(){
$(this).addClass(option.over);
} );
//マウスを移動すると元のスタイルに戻ります
$("tbody> tr",this).mouseout(function(){
$(this).removeClass(option) .over);
});
return this;//メソッドをチェーン可能にするためにこれを返します。そうでない場合はメソッドを直接呼び出すことができません。
}
})(jQuery);//この場所 (jquery) を追加する必要があります。追加しないとエラーが報告されます
//メソッドを呼び出します
// $(".TableList").SetTableBgColor({
// 奇数: "",
// 偶数: "alt",
// 選択済み: "選択済み",
/ / 上: "上"
//
});


/201012/yuanma/SetTableBgColor.rar