HTML代码:
<html> <head> <title>Rating</title> <script> function indexOf(arr,element){ for(var i=0;i<arr.length;i++){ if(arr[i]==element){ return i; } } } function InitEvent(){ var tds = document.getElementById("rating").getElementsByTagName("td"); for(var i =0; i<tds.length;i++){ tds[i].style.cursor="pointer"; tds[i].onmouseover=function(){ var tds=document.getElementById("rating").getElementsByTagName("td"); var index = indexOf(tds,this); rating.setAttribute("Rate",index+1);//属性Rate用于click时显示分数 for(var i=0;i<=index;i++){ tds[i].innerText = '★'; } for (var i=index+1;i<tds.length;i++){ tds[i].innerText = '☆'; } }; tds[i].onclick=function(){ var rating = document.getElementById("rating"); alert("您给出的分数是:"+rating.getAttribute("Rate")); }; } } </script> </head> <body onload="InitEvent();"> <table id="rating"> <tr style="color:Red"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr> </table> </body> </html>
运行结果图: