jquery 设置表格奇偶数的颜色和行被选中的颜色样式
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>
