第一种方法:仅点击时有反应 function indexOf(arr,element) { for (var i = 0; i < arr.length;i++ ) { if (arr[i] == element) { return i;//返回element在arr数组中的位置号 } } return -1;//未发现该元素时的返回值 } function initevent() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.onclick = tdonclick; td.style.cursor = "pointer";//使经过的鼠标变为手状 } } function tdonclick() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); var index=indexOf(tds,this);//获取当前点击td在tds数组中的位置 for (var i = 0; i <= index; i++) {//使鼠标点击之前的所有td背景颜色变为红色 var td = tds[i]; td.style.background = "red"; } for (var i = index + 1; i < tds.length; i++) {//使鼠标点击之后的所有td背景颜色变为白色 var td = tds[i]; td.style.background = "white"; } } function initevent() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.style.cursor = "pointer"; td.onmouseover = function () { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); var index = indexOf(tds, this); for (var i = 0; i <= index; i++) { tds[i].innerText = "★"; } for (var i = index+1; i < tds.length; i++) { tds[i].innerText = "☆"; } }; td.onclick = function () { alert("你的评分是:" + (indexOf(tds, this) + 1) + "分"); } } } 网页内容: <body οnlοad="initevent()"> <table id="pingfen"> <tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr> </table> </body> 第二种方法:标准版 function indexOf(arr, element) { for (var i = 0; i < arr.length; i++) { if (arr[i] == element) { return i; } } return -1;//未发现数组arr内含有element里的返回值 } function initevent() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.style.cursor = "pointer"; td.onmouseover = wjxover; td.onclick = wjxclick; } } function wjxover() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); var index = indexOf(tds, this); for (var i = 0; i <= index; i++) { var td = tds[i]; td.innerText = "★"; } for (var i = index+1; i <tds.length; i++) { var td = tds[i]; td.innerText = "☆"; } } function wjxclick() { var pingfen = document.getElementById("pingfen"); var tds = pingfen.getElementsByTagName("td"); alert("你评了"+(indexOf(tds, this)+1)+"分"); } 网页内容: <body οnlοad="initevent()"> <table id="pingfen"> <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr> </table> jquery版: $(function () { var arr = new Array(); $("#pingfen td").mouseover(function () { $("td").css("cursor", "pointer"); $("#pingfen td").text("★"); $(this).nextAll().text("☆"); }); $("#pingfen td").click(function () { $("#pingfen td").each(function (key) { if ($(this).text() == "★") { arr[key] = $(this).text(); } }); alert("你评了" + arr.length + "分"); arr.length = 0;//清空一下,以防连续评分出错 }); }); $(function () { $("input[value=清空]").click(function () { $("#pingfen td").text("☆"); }); }); 网页内容: <table id="pingfen"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table> <input type="button" value="清空" />