您的位置：首页 > Web前端 > JQuery

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

2009-05-12 09:24 471 查看
<!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>

注意：请不要给单元格设置指定的颜色。否则无法变色！

code:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航