jquery实现表格隔行换色、锁定单元行、荧光棒、全选反选特效
来源：互联网 发布：守望先锋网络延迟 编辑：程序博客网 时间：2024/04/30 06:47
<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>
