表格隔行换色带全选反选效果

稿源：互联网 2022-04-02 21:43:08 点击： 1108 撤稿纠错

隔行换色效果，带全选反选按钮，网站后台常用js特效代码。

以下讨论的是和隔行换色全选反选相关的表格隔行换色带全选反选效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 表格隔行换色、荧光棒、全选反选效果 站长特效网欢迎您</title>
<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;
 cursor:pointer;
}
.tdOdd{
 background:#f1fefa;
}
.tdOver{
 background:#F5FAF7;
}
.tdClick{
 background:#64B495;
 color:#000;
}
</style>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<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);
 })
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新后看效果。
<table>
  <tr>
    <th><input type="checkbox"></th>
    <th>姓名</th>
    <th>年龄</th>
    <th>专业</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>王洪剑</td>
    <td>22</td>
    <td>站长特效网一号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>李川川</td>
    <td>20</td>
    <td>站长特效网二号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>陈超</td>
    <td>22</td>
    <td>站长特效网三号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>秦玉龙</td>
    <td>21</td>
    <td>站长特效网四号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>刘威</td>
    <td>21</td>
    <td>站长特效网五号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>张会会</td>
    <td>21</td>
    <td>站长特效网六号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>胡海生</td>
    <td>30</td>
    <td>站长特效网七号</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>吴雄</td>
    <td>22</td>
    <td>站长特效网八号</td>
  </tr>
</table>
</body>
</html>

关于表格隔行换色带全选反选效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564711.shtml方便下次再访问哦。

·上一篇： 输入数字金额显示大写金额js特效
·下一篇： 点击按钮文本框的值增加效果

表格隔行换色带全选反选效果

文章分类LIST >>返回首页

最新游戏

最新新闻