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

[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;}