jQuery 全選/反選以及單擊行改變背景色實(shí)例
更新時(shí)間:2013年07月02日 17:08:05 作者:
通過jQuery實(shí)現(xiàn)全選或反選以及單擊行改變背景色,具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
我先把CSS樣式放出來,其實(shí)這個(gè)可以直接忽略
body{margin:0;padding:0;font-size:12px;font-family:微軟雅黑;}
.datagrid{width:100%;}
.datagird tr th{background-color:#191970; font-size:14px;}
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* 選中行樣式 */
.table-row-selected{background:#fff68f;}
我們再來看頁面HTML結(jié)構(gòu)
<div id="page">
<table class="datagrid" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input id="CheckAll" name="checkall" type="checkbox" /></th>
<th>ID</th>
<th>標(biāo)題</th>
<th>發(fā)布人</th>
<th>發(fā)布時(shí)間</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">1</td>
<td>阿里做對了哪三件事?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">2</td>
<td>大盤點(diǎn):被互聯(lián)網(wǎng)改寫的16個(gè)傳統(tǒng)行業(yè)</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">3</td>
<td>如果智能手機(jī)市場有變,酷派們怎么辦?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">4</td>
<td>看看福特們是如何抵御谷歌蘋果的?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
</tbody>
</table>
</div>
實(shí)現(xiàn)功能
1)單擊行改變背景色
$(".datagrid tbody tr").bind("click", function () {
var oThis = $(this);
if (oThis.hasClass("table-row-selected")) {
oThis.removeClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").removeAttr("checked");
} else {
oThis.addClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").attr("checked", "checked");
}
});
2)全選/反全選功能(未完成,待續(xù))
復(fù)制代碼 代碼如下:
body{margin:0;padding:0;font-size:12px;font-family:微軟雅黑;}
.datagrid{width:100%;}
.datagird tr th{background-color:#191970; font-size:14px;}
.datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:collapse;}
/* 選中行樣式 */
.table-row-selected{background:#fff68f;}
我們再來看頁面HTML結(jié)構(gòu)
復(fù)制代碼 代碼如下:
<div id="page">
<table class="datagrid" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input id="CheckAll" name="checkall" type="checkbox" /></th>
<th>ID</th>
<th>標(biāo)題</th>
<th>發(fā)布人</th>
<th>發(fā)布時(shí)間</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">1</td>
<td>阿里做對了哪三件事?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">2</td>
<td>大盤點(diǎn):被互聯(lián)網(wǎng)改寫的16個(gè)傳統(tǒng)行業(yè)</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">3</td>
<td>如果智能手機(jī)市場有變,酷派們怎么辦?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="5%">4</td>
<td>看看福特們是如何抵御谷歌蘋果的?</td>
<td align="center" width="10%">internet</td>
<td align="center" width="15%">2013-07-01</td>
</tr>
</tbody>
</table>
</div>
實(shí)現(xiàn)功能
1)單擊行改變背景色
復(fù)制代碼 代碼如下:
$(".datagrid tbody tr").bind("click", function () {
var oThis = $(this);
if (oThis.hasClass("table-row-selected")) {
oThis.removeClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").removeAttr("checked");
} else {
oThis.addClass("table-row-selected");
oThis.children("td:eq(0)").children("input[name='check']").attr("checked", "checked");
}
});
2)全選/反全選功能(未完成,待續(xù))
您可能感興趣的文章:
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery 實(shí)現(xiàn)的全選和反選
- jQuery實(shí)現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
- jquery 實(shí)現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jquery input checked全選與反選1.3.2的版本
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
- jQuery實(shí)現(xiàn)checkbox列表的全選、反選功能
相關(guān)文章
jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
這篇文章主要介紹了jQuery操作Dom元素、jQuery遍歷、JavaScript遍歷,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01Raphael一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
Raphael是一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ),你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細(xì)介紹,感興趣的朋友可以了解下哦2013-01-01Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例
下面小編就為大家?guī)硪黄狤asyui使用Dialog行內(nèi)按鈕布局的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07騰訊與新浪的通過IP地址獲取當(dāng)前地理位置(省份)的接口
通過IP地址獲取當(dāng)前地理位置(省份)的接口,方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07jQuery實(shí)現(xiàn)簡單的抽獎(jiǎng)游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單的抽獎(jiǎng)游戲,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
這篇文章主要介紹了BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格的相關(guān)資料,需要的朋友可以參考下2016-04-04