熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

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

2013-11-23 18:29:09  來源: Javascript 

  我先把CSS樣式放出來其實這個可以直接忽略

復制代碼 代碼如下:
body{margin:;padding:;fontsize:px;fontfamily:微軟雅黑;}
datagrid{width:%;}
datagird tr th{backgroundcolor:#; fontsize:px;}
datagrid tr th datagrid tr td{border:px solid #ccc; bordercollapse:collapse;}
/* 選中行樣式 */
tablerowselected{background:#ffff;}

  
我們再來看頁面HTML結構

復制代碼 代碼如下:
<div id="page">
<table class="datagrid" cellpadding="" cellspacing="">
<thead>
<tr>
<th><input id="CheckAll" name="checkall" type="checkbox" /></th>
<th>ID</th>
<th>標題</th>
<th>發布人</th>
<th>發布時間</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>阿裡做對了哪三件事?</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>大盤點被互聯網改寫的個傳統行業</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>如果智能手機市場有變酷派們怎麼辦?</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="center" width="%"></td>
<td>看看福特們是如何抵御谷歌蘋果的?</td>
<td align="center" width="%">internet</td>
<td align="center" width="%"></td>
</tr>
</tbody>
</table>
</div>

  
實現功能
)單擊行改變背景色

復制代碼 代碼如下:
$("datagrid tbody tr")bind("click" function () {
var oThis = $(this);
if (oThishasClass("tablerowselected")) {
oThisremoveClass("tablerowselected");
oThischildren("td:eq()")children("input[name=check]")removeAttr("checked");
} else {
oThisaddClass("tablerowselected");
oThischildren("td:eq()")children("input[name=check]")attr("checked" "checked");
}
});

  
)全選/反全選功能(未完成待續)


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25501.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.