<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <mce:script type="text/javascript"><!-- function initEvent(){ var table1=document.getElementById("table1"); var tds=table1.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ var td=tds[i]; td.οnclick=tdOnClick; td.style.cursor="pointer";//手型光标 } } function tdOnClick(){ var txtRate=document.getElementById("txtRate"); var table1=document.getElementById("table1"); var tds=table1.getElementsByTagName("td"); var index=indexOf(tds,this);//获取被点击的单元格的序号 for(var i=0;i<=index;i++){ var td=tds[i]; td.style.background="red"; txtRate.value=(index+1).toString()+"分"; } for(var i=index+1;i<tds.length;i++){ var td=tds[i]; td.style.background="white"; } } function indexOf(arr,element){ for(var i=0;i<arr.length;i++){ if(arr[i]==element){ return i; } } return -1; } // --></mce:script> </head> <body οnlοad="initEvent()"> 得分:<input type="text" style="border:0" mce_style="border:0" id="txtRate" /> <table id="table1"> <tr> <td>★</td><td>★</td><td>★</td><td>★</td><td>★</td> </tr> </table> </body> </html>