js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等

最新推荐文章于 2021-08-19 16:36:26 发布

午夜灬玫瑰钻

最新推荐文章于 2021-08-19 16:36:26 发布

阅读量1.7k

点赞数

文章标签： javascript html xhtml

本文链接：https://blog.csdn.net/gujianpenggu/article/details/13648719

版权

代码：：：

<!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=utf-8" />
<title>js实现表格隔行变色效果</title>
<style>
.top{
   background-color:#F93;
   color:#30C;}
table{
   border:1px #000 dashed;
   border-collapse:collapse; /*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
                                   值            描述
                                      separate    默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
                                  collapse    如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
                                    inherit 规定应该从父元素继承 border-collapse 属性的值。

                              */
   }
td,th{
       border:#000 1px solid;
       text-align:center;}

.one{

       background-color:#066;
       }
.two{
   background-color:#9F9;
   }
.over{
   background-color:#6CF;}
</style>
<script language="javascript">

function geHang(){

   //获取所有的tr
   var trlist=document.getElementsByTagName("tr");
   //判断从第二个tr起到倒数第二个tr的tr标签，因为获取tr的对象数组是从下标是从0开始的所以第二就是下表为1的tr标签倒数第二tr也就是trlist.length-1.
           for(var i=1;i<trlist.length-1;i++){
           //对对象的下标i判断，是偶数用className为one，else则为two，one和two是两种不同的属性
                       if(i%2==0){
                           trlist[i].className="one";

                           }else{
                               trlist[i].className="two";
                       }

           //此处是鼠标放上去和移开是的一个效果，也是通过改变tr的className实现的
                   //先将鼠标一上去的那个tr的本身的颜色保存下来，以便移走后改回来原来颜色用
                   var oldcolor;
                   //给每个tr加上onmouseover事件（鼠标放上去触发）
                       trlist[i].οnmοuseοver=function(){
                       //当鼠标放上去是先将本身的class属性给了oldcolr。
                           oldcolor=this.className;
                           //然后将自己的className改为over，引用over的属性，this指的是鼠标放上去的那个tr对象。
                           this.className="over";
                           }
                   //给每个tr加上onmouseout事件（鼠标离开时触发）
                       trlist[i].οnmοuseοut=function(){
                           //当鼠标离开时将原来的className改回来，继续用原来的className属性
                           this.className=oldcolor;
                           }




           }
   }



</script>
</head>

<body οnlοad="geHang()">
<table width="621" border="1" align="center">
<tr class="top">
    <th width="105"><A href="javascript:selectAll('qx')" type=all>全选</A></th>
    <th width="111">发件人</th>
    <th width="128">邮件名称</th>
    <th width="249">邮件附属信心</th>
</tr>
<tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
   <tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
     <tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
     <tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
     <tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
   <tr>
<td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
   <tr class="top">
<td><A href="javascript:selectAll('qx')" type=all>全选</A></td>
<td colspan="3">
<A href="javascript:selectAll('qx')" type=all>全选</A> - 
<A href="javascript:selectAll('fx')" type=reverse>反选</A> - 
<A href="javascript:selectAll('qbx')" type=no>全不选</A> - 
<INPUT class="Btn BtnNml" hideFocus type=button value="删除所选附件" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move" onClick="del('./delGoods.php');" />
</td>
</tr>
</table>


<script language="javascript">
       function selectAll(type)
       {
          var arrObj=document.getElementsByName("idlist[]");

           if(type=="qx"){
              for(var i=0; i<arrObj.length; i++){
                  arrObj[i].checked=true;
               }
           } else if(type=="qbx"){
               for(var i=0; i<arrObj.length; i++){
                  arrObj[i].checked=false;
               }
           } else if(type=="fx"){
               for(var i=0; i<arrObj.length; i++){
                  if(arrObj[i].checked==false){
                       arrObj[i].checked=true;
                   } else{
                           arrObj[i].checked=false;
                   }

               }
           }
   }

   </script>
</body>
</html>