• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

半度微笑

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

表格样式(鼠标经过时整行变色)

鼠标经过时行变色

<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>

posted on 2011-10-13 10:09  半度微笑  阅读(859)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3