本文介绍了一个使用JavaScript实现的网页表格中TD元素的鼠标和键盘控制案例。通过为表格单元格添加点击和键盘事件，实现了单元格高亮显示的功能。但键盘事件触发时未能正确获取到目标TD元素。
<html>
<body>
<table bgcolor="#FFFFFF">
<tr>
<td id="td1"> click me! </td>
<td id="td2">*********************</td>
<td id="td3"> click me too! </td>
</tr>
<tr>
<td id="td4"> aaaaa </td>
</tr>
</table>
</body>
</html>
<script language="JavaScript">
var count;
var selectObject = document.getElementsByTagName("td");
alert(selectObject.length);
for(var i=0;i<selectObject.length;i++) {
selectObject [i].onclick=doClick;
count = i;
selectObject [i].onkeydown=doKeyDown;
}
//selectObject.onclick=doClick;
var oldObj;
var obj;
var nextObj;
function doClick() {
obj = event.srcElement;
alert(obj);
if(typeof oldObj != "object") {
oldObj = obj;
} else {
clearStyle(oldObj);
}
addStyle(obj);
}
function clearStyle(oldObj) {
oldObj.style.borderLeft = "";
oldObj.style.borderRight = "";
oldObj.style.borderTop = "";
oldObj.style.borderBottom = "";
oldObj.style.padding = "";
oldObj.style.backgroundColor = "";
oldObj = obj;
}
function addStyle(obj) {
alert("a");
obj.style.borderLeft = "1px solid buttonhighlight";
obj.style.borderRight = "1px solid buttonshadow";
obj.style.borderTop = "1px solid buttonhighlight";
obj.style.borderBottom = "1px solid buttonshadow";
obj.style.padding = "1px";
obj.style.backgroundColor = "#cccccc";
oldObj = obj;
}
function addNextStyle(nextObj) {
nextObj.style.borderLeft = "1px solid buttonhighlight";
nextObj.style.borderRight = "1px solid buttonshadow";
nextObj.style.borderTop = "1px solid buttonhighlight";
nextObj.style.borderBottom = "1px solid buttonshadow";
nextObj.style.padding = "1px";
nextObj.style.backgroundColor = "#cccccc";
oldObj = nextObj;
}
function doKeyDown() {
alert("count="+count);
alert("window.event=" + window.event);
var a = window.event.keyCode;
if(a == 39) {
alert(selectObject [count+1]);
nextObj = selectObject [count];
alert (nextObj);
clearStyle(oldObj);
addNextStyle(nextObj);
}
}
</script>
希望用鼠标和键盘控制TD,结果鼠标成功了,键盘取不到触发事件的对象,备忘一下.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
