javaScript中如何用上下左右四个键控制表格 一个五行五列的表格,要求用鼠标和键盘的方向键都能同时控制表格。点到那个单元格那个单元格就变色。然后就用方向键也可以控制。急。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <META http-equiv="Content-Style-Type" content="text/css"> </head> <script language=javascript> var TH_HEIGHT="20px"; var THCOLOR="#ffff99"; var THBGCOLOR= "#ccecff"; var NEW_COLOR="red"; var cur; var nowcol=-1; var nowrow=-1; function createEventTable() { var newRow,col1,col2,col3; var ln = document.getElementById("tb1").rows.length; if( ln > 0){ for(var i=0; i<ln; i++){ if(document.getElementById("tb1").rows.length <= 0)break; document.getElementById("tb1").deleteRow(-1); } } for(var colno=0; colno<5; colno++){ newRow = document.getElementById("tb1").insertRow(-1); newRow.id = 'r'+colno; document.getElementById("r"+colno).height = TH_HEIGHT; document.getElementById("r"+colno).bgColor = THCOLOR; col1=newRow.insertCell(0); col2=newRow.insertCell(1); col3=newRow.insertCell(2); col4=newRow.insertCell(3); col5=newRow.insertCell(4); col1.id="1 "+colno col2.id = "2 "+colno; col3.id = "3 "+colno; col4.id="4 "+colno col5.id = "5 "+colno; col1.innerText = "列一"+colno; col2.innerText = "列二"+colno; col3.innerText = "列三"+colno; col4.innerText = "列四"+colno; col5.innerText = "列五"+colno; col1.onclick=alertMe; col2.onclick=alertMe; col3.onclick=alertMe ; col4.onclick=alertMe; col5.onclick=alertMe ; col1.onkeyup=showMe; col2.onkeyup=showMe; col3.onkeyup=showMe; col4.onkeyup=showMe; col5.onkeyup=showMe; } } function alertMe(){ if(cur == this) return false; if(cur!=null) cur.style.backgroundColor = THCOLOR; this.style.backgroundColor = NEW_COLOR; cur = this; var id=this.id.split(" "); nowcol=parseInt(id[0]); nowrow=parseInt(id[1]); } function showMe(){ if(event.keyCode==38){ if(nowrow>0){ var td=document.getElementById(nowcol+" "+nowrow); td.style.backgroundColor = THCOLOR; nowrow--; var nexttd=document.getElementById(nowcol+" "+nowrow) nexttd.style.backgroundColor = NEW_COLOR; } } if(event.keyCode==40){ if(nowrow<4){ var td=document.getElementById(nowcol+" "+nowrow); td.style.backgroundColor = THCOLOR; nowrow++; var nexttd=document.getElementById(nowcol+" "+nowrow) nexttd.style.backgroundColor = NEW_COLOR; } } if(event.keyCode==37){ if(nowcol>1){ var td=document.getElementById(nowcol+" "+nowrow); td.style.backgroundColor = THCOLOR; nowcol--; var nexttd=document.getElementById(nowcol+" "+nowrow) nexttd.style.backgroundColor = NEW_COLOR; }; } if(event.keyCode==39){ if(nowcol<5){ var td=document.getElementById(nowcol+" "+nowrow); td.style.backgroundColor = THCOLOR; nowcol++; var nexttd=document.getElementById(nowcol+" "+nowrow) nexttd.style.backgroundColor = NEW_COLOR; } } } window.onload=function(){ createEventTable(); } </script> <body > <TABLE cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black" border="1"> <thead> <COLGROUP> <COL align="center"> </COL> <COL align="center"> </COL> <COL align="center"> </COL> <COL align="center"> </COL> <TR height="22px" bgColor="#ccecff"> <TH width="36" >列1</TH> <TH width="36" >列2</TH> <TH width="36" >列3</TH> <TH width="36" >列4</TH> <TH width="36" >列5</TH> </TR> </thead> <TBODY id="tb1"> </TBODY> </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> new document </title> <style> table { border: 1px solid #7B7B7B; border-collapse: collapse; } td { border: 1px solid #7B7B7B; width: 60px; height: 30px; } </style> </head> <body><table id="otbl" onclick="changeColor(event);"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> <td>5</td> <td>5</td> </tr></table> <script type="text/javascript"> <!-- var currentTd = null; function changeColor(e){ var e = e || window.event; currentTd != null && (currentTd.style.backgroundColor = "#FFF"); currentTd = e.srcElement || e.target; currentTd.style.backgroundColor = "#FFCC99"; } var MoveColor = function(tblId,cellLen, rowLen){ this.tbl = document.getElementById(tblId); this.currentTd = currentTd; this.currentTr = this.currentTd.parentNode; this.rowindex = this.currentTr.rowIndex; this.cellindex = this.currentTd.cellIndex; this.maxCell = cellLen; this.maxRow = rowLen; } MoveColor.prototype = { init: function(e){ var e = e || window.event; if((this.currentTd != null) && (this.currentTd.tagName.toLowerCase() == "td")){ switch(e.keyCode){ case 37: --this.cellindex >=0 && this.ShowColor(); break; case 38: --this.rowindex >=0 && this.ShowColor(); break; case 39: ++this.cellindex < this.maxCell && this.ShowColor(); break; case 40: ++this.rowindex < this.maxRow && this.ShowColor(); break; } } }, ShowColor: function(){ currentTd.style.backgroundColor = "#FFFFFF"; currentTd = this.tbl.rows[this.rowindex].cells[this.cellindex]; currentTd.style.backgroundColor = "#FFCC99"; } } document.onkeydown = function(e){ var moveColor = new MoveColor('otbl', 5, 5); // tableId, maxCellLen, maxRowLen moveColor.init(e) } //--> </script> </body></html> http://blog.csdn.net/liuxiaoyi666/archive/2004/12/31/236102.aspx 这个例子很爽。http://blog.csdn.net/sunxing007/archive/2009/07/23/4374693.aspx 关于checkbox全选的问题 求救:IE7弹出窗口显示问题.... 怎么将字符串中的双引号依次替换成反斜线加双引号啊??急@@ javascript中的stack overflow at line:0的问题??? 做网页,小网站,计算机毕业设计 求一句查找指定字符个数的代码! 谁有可以通过鼠标拖动表头改变表格列宽度的代码?谢谢 求一正则表达式,必须输入整数或小数。(在线等,急!) iframe或frame:如何完成大小自动变化? 请教各位大虾,PHP是怎样读取javascript返回值的? 正则贪婪与惰性之理解,达人指点! 图片加载限制宽高的问题 100分
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var TH_HEIGHT="20px";
var THCOLOR="#ffff99";
var THBGCOLOR= "#ccecff";
var NEW_COLOR="red";
var cur;
var nowcol=-1;
var nowrow=-1;
function createEventTable() {
var newRow,col1,col2,col3;
var ln = document.getElementById("tb1").rows.length;
if( ln > 0){
for(var i=0; i<ln; i++){
if(document.getElementById("tb1").rows.length <= 0)break;
document.getElementById("tb1").deleteRow(-1);
}
}
for(var colno=0; colno<5; colno++){
newRow = document.getElementById("tb1").insertRow(-1);
newRow.id = 'r'+colno;
document.getElementById("r"+colno).height = TH_HEIGHT;
document.getElementById("r"+colno).bgColor = THCOLOR;
col1=newRow.insertCell(0);
col2=newRow.insertCell(1);
col3=newRow.insertCell(2);
col4=newRow.insertCell(3);
col5=newRow.insertCell(4);
col1.id="1 "+colno
col2.id = "2 "+colno;
col3.id = "3 "+colno;
col4.id="4 "+colno
col5.id = "5 "+colno; col1.innerText = "列一"+colno;
col2.innerText = "列二"+colno;
col3.innerText = "列三"+colno;
col4.innerText = "列四"+colno;
col5.innerText = "列五"+colno;
col1.onclick=alertMe;
col2.onclick=alertMe;
col3.onclick=alertMe ;
col4.onclick=alertMe;
col5.onclick=alertMe ;
col1.onkeyup=showMe;
col2.onkeyup=showMe;
col3.onkeyup=showMe;
col4.onkeyup=showMe;
col5.onkeyup=showMe;
}
}
function alertMe(){
if(cur == this) return false;
if(cur!=null) cur.style.backgroundColor = THCOLOR;
this.style.backgroundColor = NEW_COLOR;
cur = this;
var id=this.id.split(" ");
nowcol=parseInt(id[0]);
nowrow=parseInt(id[1]);
}
function showMe(){
if(event.keyCode==38){
if(nowrow>0){
var td=document.getElementById(nowcol+" "+nowrow);
td.style.backgroundColor = THCOLOR;
nowrow--;
var nexttd=document.getElementById(nowcol+" "+nowrow)
nexttd.style.backgroundColor = NEW_COLOR;
}
}
if(event.keyCode==40){
if(nowrow<4){
var td=document.getElementById(nowcol+" "+nowrow);
td.style.backgroundColor = THCOLOR;
nowrow++;
var nexttd=document.getElementById(nowcol+" "+nowrow)
nexttd.style.backgroundColor = NEW_COLOR;
}
}
if(event.keyCode==37){
if(nowcol>1){
var td=document.getElementById(nowcol+" "+nowrow);
td.style.backgroundColor = THCOLOR;
nowcol--;
var nexttd=document.getElementById(nowcol+" "+nowrow)
nexttd.style.backgroundColor = NEW_COLOR;
};
}
if(event.keyCode==39){
if(nowcol<5){
var td=document.getElementById(nowcol+" "+nowrow);
td.style.backgroundColor = THCOLOR;
nowcol++;
var nexttd=document.getElementById(nowcol+" "+nowrow)
nexttd.style.backgroundColor = NEW_COLOR;
}
} }
window.onload=function(){
createEventTable(); }
</script>
<body >
<TABLE cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black" border="1">
<thead>
<COLGROUP>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<TR height="22px" bgColor="#ccecff">
<TH width="36" >列1</TH>
<TH width="36" >列2</TH>
<TH width="36" >列3</TH>
<TH width="36" >列4</TH>
<TH width="36" >列5</TH>
</TR>
</thead>
<TBODY id="tb1">
</TBODY>
</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> new document </title>
<style>
table {
border: 1px solid #7B7B7B;
border-collapse: collapse;
}
td {
border: 1px solid #7B7B7B;
width: 60px;
height: 30px;
}
</style>
</head> <body>
<table id="otbl" onclick="changeColor(event);">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
<script type="text/javascript">
<!--
var currentTd = null;
function changeColor(e){
var e = e || window.event;
currentTd != null && (currentTd.style.backgroundColor = "#FFF");
currentTd = e.srcElement || e.target;
currentTd.style.backgroundColor = "#FFCC99";
} var MoveColor = function(tblId,cellLen, rowLen){
this.tbl = document.getElementById(tblId);
this.currentTd = currentTd;
this.currentTr = this.currentTd.parentNode;
this.rowindex = this.currentTr.rowIndex;
this.cellindex = this.currentTd.cellIndex;
this.maxCell = cellLen;
this.maxRow = rowLen;
} MoveColor.prototype = {
init: function(e){
var e = e || window.event;
if((this.currentTd != null) && (this.currentTd.tagName.toLowerCase() == "td")){
switch(e.keyCode){
case 37:
--this.cellindex >=0 && this.ShowColor();
break;
case 38:
--this.rowindex >=0 && this.ShowColor();
break;
case 39:
++this.cellindex < this.maxCell && this.ShowColor();
break;
case 40:
++this.rowindex < this.maxRow && this.ShowColor();
break;
}
}
}, ShowColor: function(){
currentTd.style.backgroundColor = "#FFFFFF";
currentTd = this.tbl.rows[this.rowindex].cells[this.cellindex];
currentTd.style.backgroundColor = "#FFCC99";
}
} document.onkeydown = function(e){
var moveColor = new MoveColor('otbl', 5, 5); // tableId, maxCellLen, maxRowLen
moveColor.init(e)
}
//-->
</script>
</body>
</html>