您的位置：首页 > Web前端 > JQuery

jquery实现表格隔行换色、锁定单元行、荧光棒、全选反选特效

2010-06-01 10:10 731 查看

<script type="text/javascript">
$(function(){
$("table tr:even").addClass("tdOdd");
$("th:first").css("background","#B4C6C1");//首个
$("table tr").mouseover(function(){
$(this).addClass("tdOver");}).mouseout(function(){
$(this).removeClass("tdOver");}).click(function(){//荧光棒
$(".tdClick").removeClass("tdClick");$(this).addClass("tdClick");
})//行锁定
$("input:checkbox:first").click(function(){
$("input:checkbox:not(input:checkbox:first)").each(function(){//剔除本身
$(this).attr(  "checked",$("input:checkbox:first").attr("checked"));
})
})
$("input:checkbox:not(input:checkbox:first)").click(function(){
var flag=true;
$("input:checkbox:not(input:checkbox:first)").each(function(){
if(!this.checked){flag=false;}//不可使用if($(this).attr("checked","false")){flag=false;}
});
$("input:checkbox:first").attr("checked",flag);
})
});
</script>
<style type="text/css">
body{
font-size:12px;
color:#366;
}
table{
border:none;
background:#fefefe;
width:100%;
border-collapse:collapse;
}
th{
background:#CFDEC6;
padding:4px;
color:#000;
}
td,.tdNormal{
border:#cfdec6   solid   1px;
padding:4px;
background:fefefe;
}
.tdOdd{
background:#f1fefa;
}
.tdOver{
background:#F5FAF7;
}
</style>

<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr>
<td>王洪剑</td>
<td>22</td>
<td>电气自动化</td>
</tr>
<tr>
<td>李川川</td>
<td>20</td>
<td>计算机</td>
</tr>
<tr>
<td>陈超</td>
<td>22</td>
<td>计算机</td>
</tr>
<tr>
<td>秦玉龙</td>
<td>21</td>
<td>计算机</td>
</tr>
<tr>
<td>刘威</td>
<td>21</td>
<td>计算机</td>
</tr>
<tr>
<td>张会会</td>
<td>21</td>
<td>计算机</td>
</tr>
<tr>
<td>胡海生</td>
<td>30</td>
<td>计算机</td>
</tr>
<tr>
<td>吴雄</td>
<td>22</td>
<td>计算机</td>
</tr>
</table>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航