110,534
社区成员
发帖
与我相关
我的任务
分享
<!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>
<script type="text/javascript">
//indexOf函数是取得元素在数组中的序号
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(element==arr[i]){
return i;
}
}
}
function initEvent(){
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onmouseover = tdOnClick;
//onmouseover是鼠标悬浮事件
td.style.cursor = "pointer";
}
}
//tdOnClick函数是具体执行变色功能的
function tdOnClick(){
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
//问题:以上两行为什么不可省略? initEvent()函数中不是取过tds吗?而且,tdOnClick()函数是在initEvent函数中触发的。我试过,取消以上两行,程序就没用了。 请问:为什么不能取消?
var index = indexOf(tds,this);
for(var i=0;i<=index;i++){
var td = tds[i];
td.style.background = "red";
}
for(var i=index+1;i<tds.length;i++){
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr><td>❤</td><td>❤</td><td>❤</td><td>❤</td><td>❤</td></tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
//indexOf函数是取得元素在数组中的序号
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(element==arr[i]){
return i;
}
}
}
var tableRating;
var tds;
function initEvent() {
tableRating = document.getElementById("tableRating");
tds = tableRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onmouseover = tdOnClick;
//onmouseover是鼠标悬浮事件
td.style.cursor = "pointer";
}
}
//tdOnClick函数是具体执行变色功能的
function tdOnClick(){
// var tableRating = document.getElementById("tableRating");
// var tds = tableRating.getElementsByTagName("td");
//问题:以上两行为什么不可省略? initEvent()函数中不是取过tds吗?而且,tdOnClick()函数是在initEvent函数中触发的。我试过,取消以上两行,程序就没用了。 请问:为什么不能取消?
var index = indexOf(tds,this);
for(var i=0;i<=index;i++){
var td = tds[i];
td.style.background = "red";
}
for(var i=index+1;i<tds.length;i++){
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr><td>❤</td><td>❤</td><td>❤</td><td>❤</td><td>❤</td></tr>
</table>
</body>
</html>
<!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>
<script type="text/javascript">
//indexOf函数是取得元素在数组中的序号
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(element==arr[i]){
return i;
}
}
}
//全局变量
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
function initEvent(){
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onmouseover = tdOnClick;
//onmouseover是鼠标悬浮事件
td.style.cursor = "pointer";
}
}
//tdOnClick函数是具体执行变色功能的
function tdOnClick(){
var index = indexOf(tds,this);
for(var i=0;i<=index;i++){
var td = tds[i];
td.style.background = "red";
}
for(var i=index+1;i<tds.length;i++){
var td = tds[i];
td.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr><td>❤</td><td>❤</td><td>❤</td><td>❤</td><td>❤</td></tr>
</table>
</body>
</html>