html上下键移动单元格,如何用键盘的上下键盘来移动 表格的每一行

无标题文档

#tb1 td{background:#ccc;padding:3px;border:1px solid #999;}

a1 a2 a3
b1 b2 b3
c1 c2 c3
d1 d2 d3
e1 e2 e3
f1 f2 f3

编辑内容:

$(document).keydown(keyCtrl);

var obj=$("#tb1").children().children();

var h=0,l=0;

var maxh=obj.size()-1

var maxl=obj.children().size()/(maxh+1)-1;

select();

function select(){

obj.eq(h).children().eq(l).css("background","#0ff");

}

function recover(){

obj.eq(h).children().eq(l).css("background","#ccc");

}

function keyCtrl(e){

var e=window.event?window.event:e;

if (e.keyCode ==37) left();

if (e.keyCode ==39) right();

if (e.keyCode ==38) up();

if (e.keyCode ==40) down();

if (e.keyCode ==13) edit();

}

function left(){

if(l>0){

recover();

l-=1;

select();

}

}

function right(){

if(l

recover();

l+=1;

select();

}

}

function up(){

if(h>0){

recover();

h-=1;

select();

}

}

function down(){

if(h

recover();

h+=1;

select();

}

}

function save(e){

var e=window.event?window.event:e;

if (e.keyCode ==13){

obj.eq(h).children().eq(l).text($("#tmptext").val());

}

}

function edit(){

$("#tmptext").val(obj.eq(h).children().eq(l).text());

$("#tmptext").select();

$("#tmptext").val("");

}

$("#tmptext").keydown(save);

$("#saveit").click(function(){

obj.eq(h).children().eq(l).text($("#tmptext").val());

})

运行代码

复制代码

另存代码

提示:您可以先修改部分代码再运行

你可能感兴趣的:(html上下键移动单元格)