鼠标移动整行变色
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>网上订餐系统</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/pagestyle.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<style type="text/css">
.td1{background-color:Silver;}
</style>
<script language="javascript">
//页面初始化时处理相关信息
$(function(){
//改变网页背景颜色
$("#changeBgColor").change(function(){
var bgColor = $(this).val();
$("body").css("background-color",bgColor);
});
$("#tb tr").mouseover(function(){
$(this).addClass("td1");
});
$("#tb tr").mouseout(function(){
$(this).removeClass("td1");
});
});
</script>
</HEAD>
<body id="ddd" bgcolor="green" leftMargin=100 topMargin=20 marginheight="0" marginwidth="0">
<input type="text" value="test"><br><br>
改变网页背景:
<select id="changeBgColor">
<option value="green" selected>绿色</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
</select>
<form id="form1" runat="server">
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机</th>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
</table>
</form>
</body>
</HTML>
