实现鼠标移动表格行上，此行背景变色研究
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：
一、利用样式CSS表达式
在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。
完整代码如下：
<html>
<head>
<title>在样式里写表达式expression，实现鼠标经过表格行上变色title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
/* 如果去掉tbDatalist tr里的代码，而增加下面的代码。则实现鼠标经过单元格上，此单元格变色
onmouseover:expression(οnmοuseοver=function(){this.style.backgroundColor='orange'});
onmouseout:expression(οnmοuseοut=function(){this.style.backgroundColor='#d9ffdc'});
*/
}
.tbDatalist tr
{
onmouseover:expression(οnmοuseοver=function(){this.style.backgroundColor='#a5e5aa'});
onmouseout:expression(οnmοuseοut=function(){this.style.backgroundColor='#d9ffdc'});
}
style>
head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名th>
<th scope="col">班级th>
<th scope="col">出生日期th>
<th scope="col">星座th>
<th scope="col">电话th>
tr>
<tr>
<td>slepoxtd>
<td> W19td>
<td>Nov 18thtd>
<td>Scorpiotd>
<td>0658635td>
tr>
<tr>
<td>smartlautd>
<td>W19td>
<td>Dec 30thtd>
<td>Capricorntd>
<td>0006621td>
tr>
<tr>
<td>lineartd>
<td>W86td>
<td>Aug 18thtd>
<td>Leotd>
<td>6398341td>
tr>
<tr>
<td>laopiaotd>
<td>W41td>
<td>May 17thtd>
<td>Taurustd>
<td>1254004td>
tr>
<tr>
<td>dovechotd>
<td>W19td>
<td>Dec 9thtd>
<td>Sagittariustd>
<td>1892013td>
tr>
table>
body>
html>
二、利用jquery的hover(fun,fun)方法
利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色，hover()方法有两个参数，第一个参数为鼠标移到某行上要执行的方法，相当于onmouseover()，第2个事参数是鼠标离开某行后要执行的方法，相当于onmouseout()。
完整代码如下：（jquery-1.4.1-vsdoc.js）为VS.NET2010自带的JQuery包
<html>
<head>
<title>利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">script>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
.tbDatalist tr.altrow
{
background-color: #a5e5aa;
}
style>
<script type="text/javascript">
$(document).ready(function() {
$("tr").hover(
function() {
$(this).css("background", "#a5e5aa"); //鼠标移动上去的颜色
},
function() {
$(this).css("background", "#d9ffdc"); //鼠标离开的颜色
}
);
});
script>
head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名th>
<th scope="col">班级th>
<th scope="col">出生日期th>
<th scope="col">星座th>
<th scope="col">电话th>
tr>
<tr>
<td>slepoxtd>
<td> W19td>
<td>Nov 18thtd>
<td>Scorpiotd>
<td>0658635td>
tr>
<tr>
<td>smartlautd>
<td>W19td>
<td>Dec 30thtd>
<td>Capricorntd>
<td>0006621td>
tr>
<tr>
<td>lineartd>
<td>W86td>
<td>Aug 18thtd>
<td>Leotd>
<td>6398341td>
tr>
<tr>
<td>laopiaotd>
<td>W41td>
<td>May 17thtd>
<td>Taurustd>
<td>1254004td>
tr>
<tr>
<td>dovechotd>
<td>W19td>
<td>Dec 9thtd>
<td>Sagittariustd>
<td>1892013td>
tr>
table>
body>
html>
三、利用JS的onmouseover()方法和onmouseout()方法
利用JS的onmouseover()方法和onmouseout()方法，实现鼠标移动表格行上变色。
完整代码如下：
<html>
<head>
<title>利用JS，实现鼠标移动表格行上变色title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 500;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
style>
<script type="text/javascript">
window.onload = function showTable() {
var tablename = document.getElementById("oTable");
var oRows = tablename.getElementsByTagName("tr");
for (var i = 0; i < oRows.length; i++) {
oRows[i].onmouseover = function() {
this.style.backgroundColor = "#a5e5aa";
}
oRows[i].onmouseout = function() {
this.style.backgroundColor = "#d9ffdc";
}
}
}
script>
head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名th>
<th scope="col">班级th>
<th scope="col">出生日期th>
<th scope="col">星座th>
<th scope="col">电话th>
tr>
<tr>
<td>slepoxtd>
<td> W19td>
<td>Nov 18thtd>
<td>Scorpiotd>
<td>0658635td>
tr>
<tr>
<td>smartlautd>
<td>W19td>
<td>Dec 30thtd>
<td>Capricorntd>
<td>0006621td>
tr>
<tr>
<td>lineartd>
<td>W86td>
<td>Aug 18thtd>
<td>Leotd>
<td>6398341td>
tr>
<tr>
<td>laopiaotd>
<td>W41td>
<td>May 17thtd>
<td>Taurustd>
<td>1254004td>
tr>
<tr>
<td>dovechotd>
<td>W19td>
<td>Dec 9thtd>
<td>Sagittariustd>
<td>1892013td>
tr>
table>
body>
html>
扩展与补充
1、指定在指定行范围内，隔行变色
例如鼠标只能移动表格2到4行上背景才变色，完整代码如下：
<html>
<head>
<title>利用JS指定范围，实现鼠标移动表格行上变色title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 60%;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 上 右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 上 右下左 */;
}
style>
<script type="text/javascript">
window.onload = function() {
//鼠标只能移动表格2到4行上背景才变色
showTable(2, 4);
}
function showTable(start,end) {
var tablename = document.getElementById("oTable");
var oRows = tablename.getElementsByTagName("tr");
//校正参数
start = start > tablename.rows.length ? 0 : start;
end = end > tablename.rows.length ? tablename.rows.length : end;
for (var i = start; i <= end; i++) {
oRows[i].onmouseover = function() {
this.style.backgroundColor = "#a5e5aa";
}
oRows[i].onmouseout = function() {
this.style.backgroundColor = "#d9ffdc";
}
}
}
script>
head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名th>
<th scope="col">班级th>
<th scope="col">出生日期th>
<th scope="col">星座th>
<th scope="col">电话th>
tr>
<tr>
<td>slepoxtd>
<td> W19td>
<td>Nov 18thtd>
<td>Scorpiotd>
<td>0658635td>
tr>
<tr>
<td>smartlautd>
<td>W19td>
<td>Dec 30thtd>
<td>Capricorntd>
<td>0006621td>
tr>
<tr>
<td>lineartd>
<td>W86td>
<td>Aug 18thtd>
<td>Leotd>
<td>6398341td>
tr>
<tr>
<td>laopiaotd>
<td>W41td>
<td>May 17thtd>
<td>Taurustd>
<td>1254004td>
tr>
<tr>
<td>dovechotd>
<td>W19td>
<td>Dec 9thtd>
<td>Sagittariustd>
<td>1892013td>
tr>
table>
body>
html>
2、鼠标点击变色，代表选择了此行
当我们在浏览数据时，如果单击某行，则此行背景变色代表选择了此行，当再次单击时，取消选择，效果如下：
代码如下：
<html>
<head>
<title>利用JS，实现鼠标移动表格行上变色+鼠标点击变色title>
<style type="text/css">
.tbDatalist
{
border: 1px solid #007108;
width: 500px;
border-collapse: collapse; /* 边框重叠,cell间没有空隙 */
background-color: #d9ffdc;
}
.tbDatalist th
{
border: 1px solid #007108;
background-color: #00a40c;
color: #ffffff;
font-weight: bold;
padding: 4px 12px 4px 12px; /* 顺时针：上右下左 */
text-align: center;
}
.tbDatalist td
{
border: 1px solid #007108;
text-align: left;
padding: 4px 10px 4px 10px /* 顺时针：上右下左 */;
}
style>
<script type="text/javascript">
var x;
window.onload = function showTable() {
var tablename = document.getElementById("oTable");
var oRows = tablename.getElementsByTagName("tr");
for (var i = 0; i < oRows.length; i++) {
//利用变量x来判断是否单击过，如果单击过使行一直变色，再次单击回复原来颜色
oRows[i].onmouseover = function() {
if (this.x != "1")
this.style.backgroundColor = "#a5e5aa";
}
oRows[i].onmouseout = function() {
if (this.x != "1")
this.style.backgroundColor = "#d9ffdc";
}
oRows[i].onclick = function() {
if (this.x != "1") {
this.x = "1";
this.style.backgroundColor = "#ff00dc";
} else {
this.x = "0"
this.style.backgroundColor = "#d9ffdc";
}
}
}
}
script>
head>
<body>
<table class="tbDatalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">姓名th>
<th scope="col">班级th>
<th scope="col">出生日期th>
<th scope="col">星座th>
<th scope="col">电话th>
tr>
<tr>
<td>slepoxtd>
<td> W19td>
<td>Nov 18thtd>
<td>Scorpiotd>
<td>0658635td>
tr>
<tr>
<td>smartlautd>
<td>W19td>
<td>Dec 30thtd>
<td>Capricorntd>
<td>0006621td>
tr>
<tr>
<td>lineartd>
<td>W86td>
<td>Aug 18thtd>
<td>Leotd>
<td>6398341td>
tr>
<tr>
<td>laopiaotd>
<td>W41td>
<td>May 17thtd>
<td>Taurustd>
<td>1254004td>
tr>
<tr>
<td>dovechotd>
<td>W19td>
<td>Dec 9thtd>
<td>Sagittariustd>
<td>1892013td>
tr>
table>
body>
html>