<style> td{ font-size:50px; color:yellow; cursor:pointer; } </style> <script type="text/javascript"> window.onload = function () { //获取所有td var tds = document.getElementById('tabRate').getElementsByTagName('td'); //为每个td注册一个onmouseover和onmouseout事件 for (var i = 0; i < tds.length; i++) { //鼠标悬浮事件 tds[i].onmouseover = function () { //设置从第0个开始到当前鼠标移动到td位置为实心五角星 for (var c = 0; c < tds.length; c++) { tds[c].innerHTML = '★'; if (tds[c] == this) { break; } } }; //鼠标离开事件 tds[i].onmouseout = function () { for (var c = 0; c < tds.length; c++) { tds[c].innerHTML = '☆'; if (tds[c] == this) { break }; } }; //为每个td注册单击事件 tds[i].onclick = function () { for (var c = 0; c < tds.length; c++) { tds[c].removeAttribute('isclicked'); } this.setAttribute('isclicked', 'isclicked'); }; } } </script> </head> <body> <table id="tabRate" border="0" cellpadding="0" cellspacing="0"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table> </body>