<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
td
{
width:50px;
height:50px;
border:1px solid #808080;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var tds = document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++)
{ tds[i].onmouseenter = OnMouseEnter;
tds[i].onmouseleave = OnMouseLeave;
tds[i].onclick = OnClick; }
}
//判断是否被点击，是 就保存黄色；不是 就变为白色
var isClick = false; //鼠标点击td保留背景色
function OnClick()
{
if (!isClick)
{
OnMouseEnter;
isClick = true;
}
} //鼠标停留td背景色变黄
function OnMouseEnter()
{
var previous = this.previousElementSibling;
this.style.backgroundColor = "yellow";
while (previous)
{
previous.style.backgroundColor = "yellow";
previous = previous.previousElementSibling;
} }
//鼠标移开td背景色变白
function OnMouseLeave()
{
if (!isClick)
{
var previous = this.previousElementSibling;
this.style.backgroundColor = "white";
while (previous) {
previous.style.backgroundColor = "white";
previous = previous.previousElementSibling;
}
}
} </script>
</head>
<body>
<div style="text-align:center;">
<table style="margin:0 auto;">
<thead>
评分后不可更改
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</body>
</html>
鼠标点击后可保留颜色。
页面效果如下：