Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例
更新時(shí)間:2013年06月09日 16:42:12 作者:
Jquery實(shí)現(xiàn)列表(隔行換色,全選,鼠標(biāo)滑過(guò)當(dāng)前行)效果實(shí)例,需要的朋友可以參考一下
[javascript]
$(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);
});
}
[html]
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" Width="100%" CssClass="gvCss">
<Columns>
<asp:TemplateField>
lt;HeaderTemplate>
<input type="checkbox" id="chkAll" name="chkAll" />
lt;/HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItem" name="chkItem" value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
[css]
.HeadColor{background-color: #E0ECFF; color:#333;line-height:25px;}
.AlterColor{background-color: #edf1f8; line-height:20px;}
.NormalColor{background-color: #f7f6f3; line-height:20px;}
.HoverColor{background: #89A5D1; line-height:20px;}
.SelectColor{background-color: #ACBFDF; line-height:20px;}
復(fù)制代碼 代碼如下:
$(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);
});
}
[html]
復(fù)制代碼 代碼如下:
<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" Width="100%" CssClass="gvCss">
<Columns>
<asp:TemplateField>
lt;HeaderTemplate>
<input type="checkbox" id="chkAll" name="chkAll" />
lt;/HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItem" name="chkItem" value='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
[css]
復(fù)制代碼 代碼如下:
.HeadColor{background-color: #E0ECFF; color:#333;line-height:25px;}
.AlterColor{background-color: #edf1f8; line-height:20px;}
.NormalColor{background-color: #f7f6f3; line-height:20px;}
.HoverColor{background: #89A5D1; line-height:20px;}
.SelectColor{background-color: #ACBFDF; line-height:20px;}
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過(guò)按鈕改變背景圖片
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)遮罩并高亮顯示效果
- jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示導(dǎo)航下拉列表
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示提示框的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
- php上傳功能集后綴名判斷和隨機(jī)命名(強(qiáng)力推薦)
相關(guān)文章
使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10jQuery避免$符和其他JS庫(kù)沖突的方法對(duì)比
jQuery中需要用到$符號(hào),如果其他js庫(kù)也定義了$符號(hào),那么就會(huì)造成沖突,會(huì)影響到j(luò)s代碼的正常執(zhí)行,下面有幾個(gè)不錯(cuò)的解決方法,大家可以參考下2014-02-02jQuery復(fù)制節(jié)點(diǎn)用法示例(clone方法)
這篇文章主要介紹了jQuery復(fù)制節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了clone方法復(fù)制節(jié)點(diǎn)及appendTo方法追加節(jié)點(diǎn)的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)?lái)一篇jQuery 判斷是否包含在數(shù)組中Array[]的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門指引
這篇文章主要介紹了使用jQuery UI庫(kù)開(kāi)發(fā)Web界面的簡(jiǎn)單入門指引,jQuery UI是一個(gè)基于jQuery的圖形組件庫(kù),需要的朋友可以參考下2016-04-04jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08