`
luckyjaky
  • 浏览: 111633 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

【JQuery】鼠标经过表格行变色

jQueryCSSXHTMLHTML 
阅读更多
[color=darkred][/color]<!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" />
<title>JQuery鼠标经过表格行变色</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<!-- 上面的js是JQuery -->
<script type="text/javascript">
$(function(){  //文档加载
$("#tb").width(520); //设置表格宽度为520像素
$("#tb").height(250); //设置表格的高度为250像素
$("#tb").css("background-color","#000000"); //设置表格背景颜色为黑色
$("tr").attr("bgColor","#FFFFFF"); //添加表格行的背景属性并设置为白色，注意这里的属性不是bgcolor而是bgColor
$("td").append(" "); //在所有单元格上添加空格
$("tr").hover(
  function(){
    $(this).addClass("hover");    //鼠标经过添加hover样式
  },
  function(){
    $(this).removeClass("hover");   //鼠标离开移除hover样式
  }
);
});
</script>
<style type="text/css">
.hover{background-color:#FF0000;}  /*这里是鼠标经过时的颜色*/
</style>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>

注意：请不要给单元格设置指定的颜色。否则无法变色！
分享到：
| 打开网页自动最大化(兼容IE,ff)
评论
1 楼 wuliupo 2011-09-24  
这个有一个BUG，当有的td设置 background-color 的时候就不能用了，就像你说的，不过可以改进：
$('tr').hover(
_mouse_on_=function(){
this._bg=this.style.backgroundColor;
$(this).css('background', 'bisque').find('>td').each(_mouse_on_);
},
_mouse_off_=function(){
$(this).css('background', this._bg).find('>td').each(_mouse_off_);
}
);
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics