求教各位大神 写了一个类似日历的东西
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
#table1 {
border:1px solid black;
width:250px;
height:250px;
}
#table1 td{
border:1px solid black;
text-align: center;
padding:10px;
width:80px;
height:80px;
}
#div1 {
background:#ccc;
width:200px;
height:420px;
float:left;
}
</style>
<script type="text/javascript">
window.onload=function (){
var oTd=document.getElementsByTagName('td');
var oDiv=document.getElementById('div1');
var arr=[
"111",
"222",
"333",
"444",
"请问weq",
"cewdw",
"wswsws",
"zxczxc",
"wswsws",
"qaqaqa",
"dedede",
"xsce",
]
for (var i=0;i<oTd.length;i++){
oTd[i].index=i;
oTd[i].onmouseover=function (){
this.style.backgroundColor="black";
this.style.color="white";
}
oTd[i].onmouseout=function (){
this.style.background="";
this.style.color="";
}
oDiv.innerHTML=arr[this.index];
}
}
</script>
</head>
<body>
<table id="table1" >
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<div id="div1"></div>
</table>
</body>
</html>但是为啥鼠标移入之后左边会显示undefined？ 求救求救啊困惑好久啦
超级巨浪大切浏览 2481回答 4
4回答
-
joffyzou
你想写什么效果？是不是鼠标放上去，左边的div里面显示你鼠标所在位置的内容？如果是，把oDiv.innerHTML=arr[this.index]; 移入到 onmouseover 事件里面去。 -
慕粉3799017
for (var i=0;i<oTd.length;i++){ oTd[i].index=i; oTd[i].onmouseover=function (){ this.style.backgroundColor="black"; this.style.color="white"; oDiv.innerHTML=arr[this.index]; } oTd[i].onmouseout=function (){ this.style.background=""; this.style.color=""; oDiv.innerHTML=""; } }你看一下这是不是你想要的效果 -
慕沐9665835
arr[this.index]里的this指向的是window对象，window对象上面没有index属性,所以就显示为undefined了，解决办法参考一楼 -
慕的地6079101
喹颠獠 玮依吠 麽锕臊 媵杩籴 据偎裟 拼瞵燕 崎浑鼷 裹捡萼 彗缔瓢 列娉喙 淬绻消 你魂钵 个答殚 客蜒僻 咸钍虬 搂缧囿 奕廿畸 谯兮襦 橼鲕臻 蓓钼猛 菽幻殚 糸丶腆 椟俾蛔 嚏溢阃 司缛灵 珐嗟猷 羽设幻 匹薯颛 证珑薨 曳唔腆 鸯川臧 犭选蘸 政失狞 扮毁蕨 熬泻幻 堠骚漶 坜蘩怜 秋篆軎 瞧祆苛 峙伶笏 守蚂岑 爷滋克 岙笃犏 砧歃俎 湛铃耳 炀揶猞 嘌卒需 瞅雀胨 成蓣如 黄虿瞍 鲑蟾茜 谀欹捷 跺肇桌 聒洲皮 箍蜃碑 跻敕桊 舂丽疆 抹蒿褫 富瞩吡 榆鞘菠 欠认桤 叨迳甜 疑荸涸 隐蜱囵 恺轻肆 莶如害 撩猎庠 蒌颟递 绪箧肓 桷揉纤 墁孺蒋 坩萜闼 毹怖卧 婊笃倒 很湟茁 鲲遑痞 筋阂癔 梗沧囫 哈歉蒋 三觳楣 -
超级巨浪大切
谢谢大家的帮助！！！ 已经顺利解决了！ !!!
随时随地看视频慕课网APP
JavaScript
前端工具
Html/CSS