急,我想用网页实现如图的操作~javascript(dom操作)

IE7,FireFox3.0运行成功

table.js:
// JavaScript Document
(function(){
//需定义每行表格数量
ctn = 16;
//定义左右两个层的ID
var leftdiv = document.getElementById('left');
var rightdiv = document.getElementById('right');
//左层主表格
var t = leftdiv.getElementsByTagName('table');
var tl = t.length;
//右侧附属表格
var tson = rightdiv.getElementsByTagName('table');
var tsonl = tson.length;
//检测两边是否相等
if(tl!=tsonl){alert('主副表内表格数量不等！');return;}
//当前表格、上表格、下表格、按键
// + = 187; - = 189; l = 37; u = 38; r = 39; d = 40;
var v = ''
var up = '',sonup = '';
var dn = '',sondn = '';
var key = '';
//记录当前位置
var vid = 0;
var vsid = 0;
//遍历
for(i=0;i var cur=t[i];
cur.onclick = function(){var n=this; return getcur(n);};
tson[i].onclick = function(){alert('附表无法选择');}
}
function getcur(obj){
var e = obj;
e.className = 'sel';
//清空其他表格的样式
for(i=0;i if(t[i]!=e){t[i].className='';}else{vid=i;vsid=i;/*获取当前表格的位置*/}
}
//获取上下两个表格
var td = e.getElementsByTagName('td');
var tdl = td.length;
var tdson = tson[vsid].getElementsByTagName('td');

for(i=0;i if(td[i].className=='y'){
dn = td[i];
sondn = tdson[i];
}
else{
up = td[i];
sonup = tdson[i];
}
}
v = e;
//为up和dn添加height
dn.style.height = '100';
up.style.height = '100';
sondn.style.height = '100';
sonup.style.height = '100';
}
//键盘事件
document.onkeydown = function(){
key=event.keyCode;
switch(key){
case 187:
add();break;
case 189:
dec();break;
case 37:
l();break;
case 38:
u();break;
case 39:
r();break;
case 40:
d();break;
default : break;
}
}
//操作
function add(){
if(v){
//初始化色彩
up.style.background = '#ffffff';
dn.style.background = '#ffff00';
v.style.background = '';
var uh = parseInt(up.style.height.toString());
var dh = parseInt(dn.style.height.toString());
uh = uh - 10;
dh = dh + 10;
if(uh<1){uh=1;dh=dh-1;}
//执行
up.style.height = uh.toString();
dn.style.height = dh.toString();
sonup.style.height = uh.toString();
sondn.style.height = dh.toString();
}
else{
alert('please select a table');
}
}

function dec(){
if(v){
//初始化色彩
up.style.background = '#ffffff';
dn.style.background = '#ffff00';
v.style.background = '';
var uh = parseInt(up.style.height.toString());
var dh = parseInt(dn.style.height.toString());
uh = uh + 10;
dh = dh - 10;
if(dh<1){dh=1;uh=uh-1;}
//执行
up.style.height = uh.toString();
dn.style.height = dh.toString();
sonup.style.height = uh.toString();
sondn.style.height = dh.toString();
}
else{
alert('please select a table');
}
}

function l(){
var g = vid - 1;
if(g>=0){
v = t[g];
vid = g;
getcur(v);
}
}

function r(){
var g = vid + 1;
if(g<=(tl-1)){
v = t[g];
vid = g;
getcur(v);
}
}

function u(){
var g = vid - ctn + 1;
if(g>=0){
v = t[g];
vid = g;
getcur(v);
}
}

function d(){
var g = vid + ctn - 1;
if(g<=(tl-1)){
v = t[g];
vid = g;
getcur(v);
}
}

})();