jquery 代碼
$(funtion(){
//設置偶數行和奇數行
$("tbody>tr:odd").addClass("ou"); //為奇數行設置樣式(添加樣式類)
$("tbody>tr:even").addClass("dan"); // 為偶數行設置樣式類
$("tbody>tr:has(:checked)").addClass("ed"); //判斷行是否被選中(返回布爾類型)添加樣式類 // has(:checked)") 返回一個bool值 true/false
// 搜索被選中 has(:checked)
$('tbody>tr').click(function(){
var hased = $(this).hasClass('ed');
if(hased)
{
$(this).removeClass("ed").find(":input").attr("checked",false);
}
else
{
$(this).addClass("ed").find(":input").attr("checked",true);
}
});
// 遍歷指定觸發函數
})
css 代碼：
<style type="text/css">
table {border:0;border-collapse:collapse;}
td {font:normal 12px/17px Arial;padding:2px;width:100px;}
th {font:bold 12px/17px
Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.dan {background:#FC0}
.ou {background:#FFF}
.ed {background:#669;color:#fff;}
</style>
HTML 代碼
<body>
<table>
<thead>
<tr><th> </th><th>標題</th><th>時間</th><th>地點</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏1</td><td>2011</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏2</td><td>2012</td><td>杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏3</td><td>2011</td><td>濟南</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏4</td><td>2012</td><td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏5</td><td>2011</td><td>武漢</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value=""></td>
<td>php100視屏6</td><td>2012</td><td>福州</td>
</tr>
</tbody>
</table>
</body>
