jquery+css兑现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果
日期：2014-05-17 浏览次数：20764 次
jquery+css实现表格隔行换色、荧光棒特效、复选框checkbox全选反选效果
<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;}<P></P>
});
$("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>
</head>
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
