希望用鼠标和键盘选中表格的研究

来源:互联网 发布:mac更换输入法 编辑:程序博客网 时间:2024/05/01 11:30

<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,结果鼠标成功了,键盘取不到触发事件的对象,备忘一下.