欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 全選/反選以及單擊行改變背景色實(shí)例

 更新時(shí)間:2013年07月02日 17:08:05   作者:  
通過jQuery實(shí)現(xiàn)全選或反選以及單擊行改變背景色,具體代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
我先把CSS樣式放出來,其實(shí)這個(gè)可以直接忽略
復(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ù))

相關(guān)文章

最新評(píng)論