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

因业务需求，参考网上资料，实现在页面中编辑table中的数据，可在页面中通过上下左右操作控制选中单元格，回车或者双击在单元总插入input控件，回车或者双击或者点击单元格外回显输入的数据。改为回车继续下一行填写。

一个input控件

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

table结构

<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>

js操作

//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");
					}
				}
			}

		}
	});