ホームページ  >  記事  >  ウェブフロントエンド  >  Jquery 実装リスト (1 行おきに色を変更、すべて選択、現在の行にマウスを置く) 効果 example_jquery

Jquery 実装リスト (1 行おきに色を変更、すべて選択、現在の行にマウスを置く) 効果 example_jquery

WBOY
WBOYオリジナル
2016-05-16 17:32:241192ブラウズ

[javascript]

复制代码代码如下:

$(function () {
グリッドビュー("グリッドビュー1");

//gridview
function Gridview(objgridview) {
//obj ID を取得
var GridviewId = "#" objgridview;
//偶数
$(gridviewId ">tbody tr:even").addClass("NormalColor");
//first
$(gridviewId ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor");
//奇数
$(gridviewId ">tbody tr:odd").addClass("AlterColor");
//移動してクリック
$(gridviewId ">tbody tr").slice(1).hover(function () {
$(this).addClass("HoverColor");
}, function () {
$(this).removeClass("HoverColor")
});
//すべてチェック
$("#chkAll").click(function () {
$(gridviewId '>tbody >tr >td >input:checkbox').attr( 'チェック済み'、this.checked);
//ステータスを確認
$(gridviewId ' >tbody >tr >td >input:checkbox').click(function () {
var expr1 =gridviewId ' >tbody > tr >td >input:checkbox:checked';
var expr2 = GridviewId ' >tbody >tr >td >input:checkbox';
var selectAll = $(expr1).length = = $(expr2).length;
$('#chkAll').attr('checked', selectAll);
}


[html]


复制代码代码如下:
 
lt;ヘッダーテンプレート>

lt;/HeaderTemplate>           







[css]


复制代码代码如下: .HeadColor{背景色: #E0ECFF; color:#333;line-height:25px;}
.AlterColor{背景色: #edf1f8; line-height:20px;}
.NormalColor{背景色: #f7f6f3; line-height:20px;}
.HoverColor{背景: #89A5D1; line-height:20px;}
.SelectColor{背景色: #ACBFDF; line-height:20px;}

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