javascript实现的使用方向键控制光标在table单元格中切换
2018-10-12 13:56
447 查看
效果截图:
html 代码:
javascript 代码:
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>选择货架号</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>
javascript 代码:
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与jQuery遍历Table所有单元格内容的方法
- JS使用for循环遍历Table的所有单元格内容
- JS 实现Table相同行的单元格自动合并示例代码
- 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
- javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
- javascript table美化鼠标滑动单元格变色
- 利用js制作html table分页示例(js实现分页)
- Js获取table当前tr行的值的代码
- JS动态添加Table的TR,TD实现方法
- js添加table的行和列 具体实现方法
- JS获取Table中td值的方法
- Js实现动态添加删除Table行示例
- JS实现动态修改table及合并单元格的方法示例
相关文章推荐
- javascript实现的使用方向键控制光标在table单元格中切换
- javascript使用方向键控制光标在table单元格中切换
- 使用javascript实现简单的选项卡切换效果
- 关于使用JavaScript实现图片点击切换(附带改变导航图片 方案一)
- 使用javaScript使图片轮播并且能够使用按键控制切换图片
- JavaScript实现的使用键盘控制人物走动实例
- 使用html5+css3来实现slider切换效果告别javascript+css
- Javascript 中键盘方向键控制光标在表单中切换之规则列表
- 使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
- JavaScript使用键盘输入控制实现数字验证功能
- 使用JavaScript实现点击循环切换图片效果
- ArcGIS api for javascript+jquery实现简单的图层控制切换
- 使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置
- 手势检测实现相册的左右滑动(并加上移动与旋转的特效) 首先,activity_main.xml里,使用ViewFlipper组件(可使用动画控制多个组件之间的切换效果) <?xml version="
- 使用JavaScript来实现图片的切换
- 使用JAVASCRIPT实现的 单行文字 逐个文字变色,可以循环控制
- JavaScript实现的使用键盘控制人物走动实例
- 使用javascript实现有效时间的控制,并显示将要过期的时间
- Javascript 中键盘方向键控制光标在表单中切换之不规则列表
- javascript实现ecshop搜索框键盘上下键切换控制