在页面中通过键盘上下左右控制table选中的td以及编辑单元格内容

1
2
3
<input type="text" id="editor"
style=" width: 99%; height: 22px; display: none; text-align: right;"></input>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table class="editTable layui-table" style="border-collapse:collapse;" width="100%">
<tbody>
<tr>
<td class="tdStyle td0 tdStyle1" rowspan="1" colspan="1" valign="center" style="font-weight:400;font-size: 110%;width:8640px;text-align:left;border-top:solid #d0d7e5 1px;border-right:solid 808080 1px;border-bottom:solid 808080 1px;border-left:solid 808080 1px;">
<nobr class="allStyle contentStyle1" title="xxxxx">xxxx</nobr>
</td>
<td class="tdStyle td1 tdStyle1" rowspan="1" colspan="1" valign="center" style="font-weight:400;font-size: 110%;width:10848px;text-align:left;border-top:solid #d0d7e5 1px;border-right:solid 808080 1px;border-bottom:solid 808080 1px;border-left:solid #d0d7e5 1px;">
<nobr s="1" x="B" r="3" c="2" y="3" class="1B3 dataTd allStyle contentStyle1 ">345,345,354,351.00</nobr>
</td>
</tr>
</tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
//dom创建文本框
var input = document.getElementById("editor");
//得到当前的单元格
var evenType;
var currentCell ;
var old;
function editCell(event){
evenType=1;
if(event==null){
currentCell=window.event.srcElement;
}else{
currentCell=event.target;
}
//根据Dimmacro 的建议修定下面的bug 非常感谢
if(currentCell.tagName=="TD"){
elemFocus();
}
if(currentCell.tagName=="NOBR"){
input.style.display='block';
//用单元格的值来填充文本框的值
input.value=currentCell.innerHTML;
old=currentCell.innerHTML;
//当文本框丢失焦点时调用last2
input.onblur=last2;
input.ondblclick=last2;
currentCell.innerHTML="";
//把文本框加到当前单元格上.
currentCell.appendChild(input);
//根据liu_binq63 的建议修定下面的bug 非常感谢
input.focus();
}
}
//点击td
function last(){
//充文本框的值给当前单元格
currentCell.firstChild.innerHTML = input.value;
if(old!=input.value){
currentCell.firstChild.className += ' change';
}
input.style.display='none';
input.value="";
}
//点击nobr
function last2(){
//充文本框的值给当前单元格
currentCell.innerHTML = input.value;
if(old!=input.value){
currentCell.className += ' change';
}
input.style.display='none';
input.value="";
}
//点击加背景色
function focusCell(){
$("td").removeClass("focus");
$(this).addClass("focus");
}
//最后为表格绑定处理方法.
$(document).on('dblclick', '.td1', editCell);
$(document).on('click', 'td', focusCell);
function elemFocus(){
input.style.display='block';
//用单元格的值来填充文本框的值
input.value=currentCell.firstChild.innerHTML;
old=currentCell.firstChild.innerHTML;
//当文本框丢失焦点时调用last
input.onblur=last;
input.ondblclick=last;
currentCell.firstChild.innerHTML="";
//把文本框加到当前单元格上.
currentCell.firstChild.appendChild(input);
input.focus();
}
//表格里回车换行
$(document).bind("keydown",'.td1', function (e) {
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
evenType=2;
currentCell = $(".focus")[0];
// 回车事件
if (currentCell.className.indexOf("td1") != -1) {
//获取当前td的列位置
var col=$(currentCell).prevAll().length;
if(input.style.display=='block'){
//解决last和blur冲突
input.onblur=null;
last();
//继续下一个格填写数据 
var lastCell=$(currentCell).parent().nextAll().length;
if(lastCell!=0){
$("td").removeClass("focus");
$($($(currentCell).parent().next())[0].cells[col]).addClass("focus");
if($($($(currentCell).parent().next())[0].cells[col]).hasClass("td1")){
//判断下一个格是否可以输入数据
//回车执行添加行
currentCell=$($($(currentCell).parent().next())[0].cells[col])[0];
elemFocus();
}
}
}else{
elemFocus();
}
return true;
}else{
return false;
}
}else if(code == 37||code == 38||code == 39||code == 40){
currentCell = $(".focus")[0];
if(currentCell!=null&&currentCell.className.indexOf("tdStyle") != -1&&input.style.display!='block'){
//获取当前td的行位置
var row=$(currentCell).parent().prevAll().length;
//获取当前td的列位置
var col=$(currentCell).prevAll().length;
if(code == 37){
//左←
if(col!=0){
$("td").removeClass("focus");
$(currentCell).prev().addClass("focus");
}
}else if(code == 38){
//上↑
if(row!=0){
$("td").removeClass("focus");
$($($(currentCell).parent().prev())[0].cells[col]).addClass("focus");
}
}else if(code == 39){
//右→
var lastRow=$(currentCell).nextAll().length;
if(lastRow!=0){
$("td").removeClass("focus");
$(currentCell).next().addClass("focus");
}
}else if(code == 40){
//下↓
var lastCell=$(currentCell).parent().nextAll().length;
if(lastCell!=0){
$("td").removeClass("focus");
$($($(currentCell).parent().next())[0].cells[col]).addClass("focus");
}
}
}
}
});