zoukankan      html  css  js  c++  java
  • 表格样式(鼠标经过时整行变色)

    鼠标经过时行变色

    <style type="text/css">
    table{
     color:#565;
     font:12px Arial, Helvetica, sans-serif;
     }
    td{
     border-top:2px solid #fff;
     border-bottom:3px solid #b3de94;
     padding:9px;
     }
    tr{
     background:#dfc;
    }
    tr:hover,tr.hover{
     background-color:#595;
     color:#fff;
     }
    </style>
    </head>

    <body>
    <table summary="book list">
    <caption>Book List</caption>
    <tr>
    <TD>Title</TD>
    <TD>ID</TD>
    <TD>Country</TD>
    <TD>price</TD>
    <TD>download</TD>
    </tr>
    <tr >
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    <tr>
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    <tr>
    <TD>tom</TD>
    <TD>41553552</TD>
    <TD>China</TD>
    <TD>$254</TD>
    <TD>dkir</TD>
    </tr>
    </table>
    <script language="javascript">
    var rows=document.getElementsByTagName('tr');//rows是一个行的数组,包含当前页中有的行
    for(var i=0;i<rows.length;i++)
    {
     rows[i].onmouseover=function(){
      this.className='hover';
      }
      rows[i].onmouseout=function(){
      this.className='';
      }
     }
    </script>

  • 相关阅读:
    索引
    IComparer 与 IComparable
    foreach
    修正needle在摘要认证时第二次请求仍返回401错误
    js笔记
    Ntp客户端
    c# 笔记
    android笔记
    nodejs笔记
    js 常用基本知识
  • 原文地址:https://www.cnblogs.com/weixiao/p/2209775.html
Copyright © 2011-2022 走看看