程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> 關於C# >> 利用Jquery實現GridView隔行換色,全選,鼠標滑過當前行效果

利用Jquery實現GridView隔行換色,全選,鼠標滑過當前行效果

編輯:關於C#
 

$(function () {
gridview("GridView1");
});

//gridview
function gridview(objgridview) {
//get obj id
var gridviewId = "#" + objgridview;
//even
$(gridviewId + ">tbody tr:even").addClass("NormalColor");
//first
$(gridviewId + ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor");
//odd
$(gridviewId + ">tbody tr:odd").addClass("AlterColor");
//move and click
$(gridviewId + ">tbody tr").slice(1).hover(function () {
$(this).addClass("HoverColor");
}, function () {
$(this).removeClass("HoverColor");
});
//all check
$("#chkAll").click(function () {
$(gridviewId + '>tbody >tr >td >input:checkbox').attr('checked', this.checked);
});
//check status
$(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);
});
}

 

 

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" Width="100%" CssClass="gvCss">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkAll" name="chkAll" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItem" name="chkItem" value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved