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