jQuery 全選/反選以及點選行改變背景色實例_jquery

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

複製程式碼 程式碼如下：

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結構

複製代碼 程式碼如下:

	ID	標題	發佈人	發佈時間
	1	阿里做對了哪三件事？	internet	2013-07-01 td>
	2	大盤點：被網路改寫的16個傳統產業	internet	2013-07-01
	3	如果智慧型手機市場有變，酷派們怎麼辦？	internet	2013-07-01 td>
	4	看看福特們是如何抵禦谷歌蘋果的？	internet	2013-07-01 td>

實作功能
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）全選/反全選功能（未完成，待續）