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>

  • 相关阅读:
    1.Hibernate配置
    CKEditor/FCKEditor的使用
    介绍一个好用的工具类库commons-beanutils
    SpringBean.xml配置
    MVC框架显示层——Velocity技术
    mysql CMD命令
    day 05
    day 04
    day03
    python day 02
  • 原文地址:https://www.cnblogs.com/weixiao/p/2209775.html
Copyright © 2011-2022 走看看