<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="gbk">
<head>
<title></title>
<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:#0FF}
.ed { background:#669;color:#fff;}
</style>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//设置偶数行和奇数行
$("tbody>tr:odd").addClass("ou");//设置偶数行的颜色，选中偶数行也可以用$("table tbody tr:od").addClass("ou");
$("tbody>tr:even").addClass("dan");//设置奇数行的颜色
$("tbody>tr:has(:checked)").addClass("ed");//设置被选中行的颜色
//搜索被选中 has(:checked)
$('tbody>tr').click(function(){
var hased=$(this).hasClass('ed');//检查有没有被选中的行，选中返回true，否则false
$(this)[hased? "removeClass" : "addClass"]("ed")//三元运算，当hased值为真，执行removeClass，否则执行addClass
.find(":input").attr("checked",!hased);
/*************这段代码与上面两行代码作用相同********************
if(hased){//如果是被选中行，移除ed样式，否则就加上ed样式
$(this).removeClass("ed").find(":input").attr("checked"，false);//选中元素ed，找到input框的checked属性
}else{
$(this).addClass("ed").find(":input").attr(checked",true);
};
};
*********************************************/
});
//遍历指定触发函数
})
</script>
</head>
<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="" checked /></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>2011</td><td>北京</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频5</td><td>2012</td><td>武汉</td></tr>
<tr><td><input type="checkbox" name="choice" value="" /></td>
<td>PHP100视频6</td><td>2011</td><td>福州</td></tr>
</tbody>
</table>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
