javascript实现的使用方向键控制光标在table单元格中切换
<!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" src="01.js"></script>
<style type="text/css">
#table1 td {
text-align:center;
width:15%;
}
#table2 td {
text-align:center;
width:15%;
background-color:#dcdcdc;
cursor:pointer;
}
</style>
<body>
<table id="table1" border="0" cellpadding="1" cellspacing="1" style="width: 100%">
<tr>
<td>货架</td>
<td>一层</td>
<td>二层</td>
<td>三层</td>
<td>四层</td>
<td>五层</td>
</tr>
</table>
<table id="table2" border="0" cellpadding="1" cellspacing="1" style="width:100%;">
<tr>
<td style="background-color:#ffffff;">A001</td>
<td id="td0" title="A001-1|11" style="background-color:#6699FF;"></td>
<td id="td1" title="A001-2|12" ></td>
<td id="td2" title="A001-3|13" ></td>
<td id="td3" title="A001-4|14"></td>
<td id="td4" title="A001-5|15"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A002</td>
<td id="td5" title="A002-1|21"></td>
<td id="td6" title="A002-2|22"></td>
<td id="td7" title="A002-3|23"></td>
<td id="td8" title="A002-4|24"></td>
<td id="td9" title="A002-5|25"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A003</td>
<td id="td10" title="A003-1|31"></td>
<td id="td11" title="A003-2|32"></td>
<td id="td12" title="A003-3|33"></td>
<td id="td13" title="A003-4|34"></td>
<td id="td14" title="A003-5|35"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A004</td>
<td id="td15" title="A004-1|41"></td>
<td id="td16" title="A004-2|42"></td>
<td id="td17" title="A004-3|43"></td>
<td id="td18" title="A004-4|44"></td>
<td id="td19" title="A004-5|45"></td>
</tr>
<tr>
<td style="background-color:#ffffff;">A005</td>
<td id="td20" title="A005-1|51"></td>
<td id="td21" title="A005-2|52"></td>
<td id="td22" title="A005-3|53"></td>
<td id="td23" title="A005-4|54"></td>
<td id="td24" title="A005-5|55"></td>
</tr>
</table>
</body>
</html>
var tdnum = 0;
var trid = "td";
// 键盘事件
document.onkeydown = function(event){
// 兼容 Mozilla Firefox
if (null == event) {
event = window.event;
}
if (event.keyCode == 13) {
p13key();
}
else if (event.keyCode <= 40 && event.keyCode >= 37) {
keytd(event.keyCode);
}
}
// 按下回车键
function p13key(){
var tdid = trid + tdnum;
var tdtitle = document.getElementById(tdid).getAttribute("title");
var pos = tdtitle.indexOf("|");
var seatname = tdtitle.substring(0, pos);
var seatid = tdtitle.substring(pos + 1, tdtitle.length);
window.alert(seatname + "," + seatid);
}
// 变换颜色
function setcolor(oldtd, newtd){
document.getElementById(oldtd).style.backgroundColor="#dcdcdc";
document.getElementById(newtd).style.backgroundColor="#6699FF";
}
// 实现切换功能主要代码
function keytd(key){
// 左
if (key == 37) {
--tdnum;
if (null == document.getElementById(trid + tdnum)) {
tdnum++;
return;
}
setcolor(trid + (tdnum + 1), trid + tdnum);
}
// 右
else if (key == 39) {
++tdnum;
if (null == document.getElementById(trid + tdnum)) {
tdnum--;
return;
}
setcolor(trid + (tdnum - 1), trid + tdnum);
}
// 上
else if (key == 38) {
tdnum = tdnum - 5;
if (null == document.getElementById(trid + tdnum)) {
tdnum = tdnum + 5;
return;
}
setcolor(trid + (tdnum + 5), trid + tdnum);
}
// 下
else if (key == 40) {
tdnum = tdnum + 5;
if (null == document.getElementById(trid + tdnum)) {
tdnum = tdnum - 5;
return;
}
setcolor(trid + (tdnum - 5), trid + tdnum);
}
}
相关推荐
-
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
先上效果图: CSS: 复制代码 代码如下: body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/selta
-
Js获取table当前tr行的值的代码
下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==
-
Js实现动态添加删除Table行示例
最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu
-
JS与jQuery遍历Table所有单元格内容的方法
本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /
-
利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
-
JS获取Table中td值的方法
本文实例讲述了JS获取Table中td值的方法.分享给大家供大家参考.具体如下: 1.当要获取多行中的任意TD时,采用给每个TD设置一个共同的class 复制代码 代码如下: <tr> <td style="display: none" id="td2">002</td> <td style="text-align: left;text-decoration:underline;" i
-
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创
从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }
-
JS实现动态修改table及合并单元格的方法示例
本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-
-
JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t
-
JS使用for循环遍历Table的所有单元格内容
JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j
-
JS 实现Table相同行的单元格自动合并示例代码
代码如下,可直接运行: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&q
-
javascript table美化鼠标滑动单元格变色
http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll
-
js添加table的行和列 具体实现方法
复制代码 代码如下: <!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></titl