<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title></title>
<script type="text/javascript">
var isclick = false;
function initEvent() {
var tableWjx = document.getElementById("tableWjx");
var tds = tableWjx.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = change;
td.onmouseout = repeal;
td.onclick = change1;
}
}
function change() {
if (!isclick) {
var tableWjx = document.getElementById("tableWjx");
var tds = tableWjx.getElementsByTagName("td");
var index = indexof(tds, this);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerText = "★";
}
}
}
function repeal() {
if (!isclick) {
var tableWjx = document.getElementById("tableWjx");
var tds = tableWjx.getElementsByTagName("td");
var index = indexof(tds, this);
for (var i = 0; i < index + 1; i++) {
var td = tds[i];
td.innerText = "☆";
}
}
}
function indexof(arr, ele) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == ele) {
return i;
}
}
return -1;
}
function change1() {
if (!isclick) {
change();
isclick = true;
}
else {
alert("Sorry,You had clicked me!");
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tableWjx"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>
</html>