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

80 阅读 0 评论 53 点赞

我是靠谱客的博主娇气水壶，最近开发中收集的这篇文章主要介绍在页面中通过键盘上下左右控制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");
}
}
}
}
});