<!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>
鼠标点击后可保留颜色。
页面效果如下：
