原文来自http://www.6excel.com/doc/20049
一.中用到的快捷键：
← → ↑ ↓ :左，右，上，下
Home ：当前行的第一列
End ：当前行的最后一列
Shift+Home ：表格的第一列
Shift+End：表格的最后一列
如图：
代码如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<html> <head> <title>创建电子表格</title> <link rel="stylesheet" href="dynamic_table.css" type="text/css"></link> <script type="text/javascript" src="dynamic_table.js"></script></head> <body> <div id="div2"> <br><span>一.输入要创建表格的标题</span><br> <input type="text" size="20" id="text_1"><br><br> <hr> <span>二.输入要创建表格的列的名称</span> <div id="div1"> <input type="button" value="添加输入文本框" class="a" id="inp_1"><br> <input type="text" size="20" id="column_name_1"><br> </div><br> <hr> <span>三.输入初始化表格的行数</span><br> <input type="text" id="text_2" maxlength="3"><br> <hr> <input type="button" value="生成表格" class="a" οnclick="sub()"><br> </div> <div id="div3"></div> </body></html>JS文件：
dynamic_table.js
1//表格的列数 2var td_num=1; 3//初始化表格的行数 4var init_tr_num=0; 5//定义行索引 6tr_index=0; 7//定义奇数行的背景色 8out_color1="#ffffff"; 9//定义偶数行的背景色 10out_color2="#eeeeee"; 11//定义鼠标经过每行时显示的背景色 12over_color="#ccff99"; 14window.οnlοad=function(){ document.getElementById("text_1").focus(); var inp_1 = document.getElementById("inp_1"); //当鼠标移动到按钮时改变颜色 inp_1.οnmοusemοve=function(){ this.style.background='#ff6633'; } inp_1.οnmοuseοut=function(){ this.style.background='#99ff66'; } inp_1.οnclick=function(){ td_num++; //列的的id名 var input_id="column_name_"+td_num; var div1 = document.getElementById("div1"); //添加新输入文本框 var inpu = document.createElement("Input"); inpu.setAttribute("type","text"); inpu.setAttribute("size","20"); inpu.setAttribute("id",input_id); var br = document.createElement("Br"); div1.appendChild(inpu); div1.appendChild(br); //当前input对象得到焦点 inpu.focus(); // alert(inpu.outerHTML); } 41} 42//提交生成表格 43function sub(){ var title=document.getElementById("text_1").value; init_tr_num=document.getElementById("text_2").value; var button = document.createElement("Button"); button.innerText="添加行"; button.οnclick=addRow; //创建表格 var table = document.createElement("Table"); table.setAttribute("cellspacing",0); //计算表格的宽 var width=(td_num+1)*150; table.style.width=width; //定位button的位置 button.style.left=width/2; //创建表格标题 var caption = document.createElement("Caption"); caption.innerText=title; //创建表格主体 var tbody = document.createElement("Tbody"); tbody.setAttribute("id","tab"); table.appendChild(caption); table.appendChild(tbody); var tr =document.createElement("Tr"); for(var i=0;i<=td_num;i++){ var th = document.createElement("Th"); var textValue=""; if(i<td_num){ //得到列名 textValue = document.getElementById("column_name_"+(i+1)).value; }else{ textValue="操作"; } var textNode = document.createTextNode(textValue); th.appendChild(textNode); tr.appendChild(th); } tbody.appendChild(tr); //把div2重写 document.getElementById("div2").innerHTML="<br>"; var div3= document.getElementById("div3"); div3.appendChild(table); div3.appendChild(button); //初始化行数 if(init_tr_num>0){ initRow(); } 89} 91//初始化行数 92function initRow(){ addManyRow(init_tr_num); //为克隆后的Input对象添加事件 var iptObjs=document.getElementsByTagName("Input"); for(var i=0;i<iptObjs.length;i++){ var newIpt=iptObjs[i]; //当在输入框中有按键按下时调用moveFocus函数进行处理 newIpt.οnkeydοwn=function(event){ moveFocus(event); }; //当该输入框得到焦点时,调用alterStyle函数设置本行样式 newIpt.οnfοcus=function(){ alterStyle("focus",this); }; //当该输入框失去焦点时,调用alterStyle函数设置本行样式 newIpt.οnblur=function(){ alterStyle("blur",this); }; //当鼠标离开该输入框时,调用alterStyle函数设置本行背景色 newIpt.οnmοuseοut=function(){ alterStyle("out",this); }; //当鼠标经过该输入框时,调用alterStyle函数设置本行背景色 newIpt.οnmοuseοver=function(){ alterStyle("over",this); }; } iptObjs[0].focus(); //为克隆后的超连接对象添加事件 iptObjs=document.getElementsByTagName("a"); for(var i=0;i<iptObjs.length;i++){ iptObjs[i].οnclick=function(){ delColumn(this); } }127}129function addManyRow(columnNumber){ var tbody=document.getElementsByTagName("Tbody")[0]; var TrObj=addRow(); for(var i=0;i<columnNumber-1;i++){ var newTr=TrObj.cloneNode(true); //克隆对象，但克隆不了对象的事件 //为每行和每列设置id属性,行的id属性标识为tr+行号,列的id属性标识为td+行号+列号 buildIndex(newTr,tr_index++); tbody.appendChild(newTr); }138}140//添加表格行141function addRow(){ //得到表格中容纳tr的tbody对象 var tbody=document.getElementById("tab"); //创建一个新的tr对象 var newTr=document.createElement("Tr"); for(var i=0;i<=td_num;i++){ //创建一个新的td对象 var newTd=document.createElement("Td"); var newIpt; //如果不是每行的最后一个单元格,则在td中创建input输入框 if(i!=td_num){ newIpt=document.createElement("Input"); //为input输入框设置属性 newIpt.setAttribute("type","text"); newIpt.setAttribute("name","text"); //当在输入框中有按键按下时调用moveFocus函数进行处理 newIpt.οnkeydοwn=function(event){ moveFocus(event); }; //当该输入框得到焦点时,调用alterStyle函数设置本行样式 newIpt.οnfοcus=function(){ alterStyle("focus",this); }; //当该输入框失去焦点时,调用alterStyle函数设置本行样式 newIpt.οnblur=function(){ alterStyle("blur",this); }; //如果是每行的最后一个单元格,则在td中创建一个可删除该行的超链接对象 }else{ newIpt=document.createElement("a"); newIpt.setAttribute("href","#"); //当点击该超链接对象时,调用delColumn函数删除当前行 newIpt.οnclick=function(){delColumn(this)}; newIpt.innerHTML="删除当前行"; //设置每行最后一个td的右边框显示出来 // newTd.className="rightSideUnit"; newTd.setAttribute("align","center"); } //当鼠标离开该输入框时,调用alterStyle函数设置本行背景色 newIpt.οnmοuseοut=function(){ alterStyle("out",this); }; //当鼠标经过该输入框时,调用alterStyle函数设置本行背景色 newIpt.οnmοuseοver=function(){ alterStyle("over",this); }; //将创建的输入框和超链接都放入td newTd.appendChild(newIpt); //将td放入tr newTr.appendChild(newTd); } //将tr放入tbody tbody.appendChild(newTr);196 //为每行和每列设置id属性,行的id属性标识为tr+行号,列的id属性标识为td+行号+列号 buildIndex(newTr,tr_index++); return newTr;199}201//删除当前行202//obj:发生点击事件的超链接对象203function delColumn(obj){ var currentTr=obj.parentNode.parentNode; var currentTrIndex=parseInt((currentTr.id).substring(3)); currentTr.parentNode.removeChild(currentTr); var nextTr=document.getElementById("tr_"+(currentTrIndex+1)); tr_index--; //重新计算行号和列号 buildIndex(nextTr,currentTrIndex);211}213//为传入的obj及后续所有行建立索引214function buildIndex(obj,row_index){ if(obj){ obj.setAttribute("id","tr_"+row_index); var tdArr=obj.childNodes; for(var i=0;i<tdArr.length;i++){ tdArr[i].setAttribute("id","td_"+row_index+"_"+i); } //为obj行配置背景色,单行为out_color1,双行为out_color2 configRowColor(obj); var nextTr=obj.nextSibling; buildIndex(nextTr,row_index+1); }226}228//移动光标229function moveFocus(event){ //得到当前事件对象 var event=window.event||event; //得到该事件作用的对象,即输入框 var ipt=event.srcElement||event.target; //得到当前输入框所在的td对象 var tdObj=ipt.parentNode; //通过字符串分割函数根据td的Id属性的值得到当前td的行号和列号 var row_index=parseInt((tdObj.id).split("_")[1]); var col_index=parseInt((tdObj.id).split("_")[2]); //得到当前td的下一个td对象 var nextTd=document.getElementById("td_"+row_index+"_"+(col_index+1)); //得到当前td的上一个td对象 var previousTd=document.getElementById("td_"+row_index+"_"+(col_index-1)); //得到当前td的上一行的td对象 var aboveTd=document.getElementById("td_"+(row_index-1)+"_"+col_index); //得到当前td的下一行的td对象 var downTd=document.getElementById("td_"+(row_index+1)+"_"+col_index); //得到当前行的第一个td对象 var currentHomeTd=document.getElementById("td_"+row_index+"_0"); //得到当前行的最后一个td对象 var currentEndTd=document.getElementById("td_"+row_index+"_"+(td_num-1)); //得到表格第一个td对象 var homeTd=document.getElementById("td_0_0"); //得到表格最后一个td对象 var endTd=document.getElementById("td_"+(tr_index-1)+"_"+(td_num-1)); //对按键的事件代码进行判读,如果目标td存在并且目标td内为输入框,则得到焦点 if(event.shiftKey){ if(event.keyCode==36){//shift+home组合键 if(homeTd&&homeTd.childNodes[0].tagName=="INPUT")homeTd.childNodes[0].focus(); }else if(event.keyCode==35){//shift+end组合键 if(endTd&&endTd.childNodes[0].tagName=="INPUT")endTd.childNodes[0].focus(); } }else{ switch(event.keyCode){ case 37://左 if(previousTd&&previousTd.childNodes[0].tagName=="INPUT"){ previousTd.childNodes[0].focus(); } break; case 39://右 if(nextTd&&nextTd.childNodes[0].tagName=="INPUT")nextTd.childNodes[0].focus(); break; case 38://上 if(aboveTd&&aboveTd.childNodes[0].tagName=="INPUT")aboveTd.childNodes[0].focus(); break; case 40://下 if(downTd&&downTd.childNodes[0].tagName=="INPUT")downTd.childNodes[0].focus(); break; case 36://Home if(currentHomeTd&¤tHomeTd.childNodes[0].tagName=="INPUT")currentHomeTd.childNodes[0].focus(); break; case 35://End if(currentEndTd&¤tEndTd.childNodes[0].tagName=="INPUT")currentEndTd.childNodes[0].focus(); break; } }289}291//修改背景色292//flag:判断标识,判断到底是指针经过还是指针离开293//obj:输入框294function alterStyle(flag,obj){ var oldColor=out_color1; var currentTd=obj.parentNode; var trObj=obj.parentNode.parentNode; if(parseInt((trObj.id).substring(3))%2!=0){ oldColor=out_color2; } var tdArr=trObj.childNodes; if(flag=="out"){ for(var i=0;i<tdArr.length;i++){ tdArr[i].style.backgroundColor=oldColor; } }else if(flag=="over"){ for(var i=0;i<tdArr.length;i++){ tdArr[i].style.backgroundColor=over_color; } }else if(flag=="focus"){ currentTd.style.borderLeft="2px solid #000"; currentTd.style.borderRight="2px solid #000"; currentTd.style.borderBottom="2px solid #000"; currentTd.style.borderTop="2px solid #000"; obj.style.cursor="auto"; }else if(flag=="blur"){ currentTd.style.borderLeft="0"; currentTd.style.borderRight="0"; currentTd.style.borderBottom="0"; currentTd.style.borderTop="0"; obj.style.cursor="pointer"; } 324}326//配置行的背景色327function configRowColor(tr){ var index=parseInt((tr.id).substring(3)); var tdArr=tr.childNodes; if(index%2!=0){ for(var i=0;i<tdArr.length;i++){ tdArr[i].style.backgroundColor=out_color2; } }else{ for(var i=0;i<tdArr.length;i++){ tdArr[i].style.backgroundColor=out_color1; } }339}主页中的css：dynamic_table.css
1body {}{ font: 14px; color: orange; width: 100%; height: 100%; margin: 0; padding: 0; height: 100%; top: 0; left: 0;11}13table {}{ margin:0; padding:0; left:10px; background-color: #aaa; table-layout:fixed; position: absolute;20}22th {}{ border: 1px solid #faa; border-bottom: 0px; border-right: 0px; background-color: #faa; color: #fff;28}30caption {}{ text-align: left; border: 1px solid #aaa; border-bottom: 0px; border-right: 0px; font-weight: bold; background-color: #aa88ee;37}39button {}{ margin-top: 3; background-color: #99cc00; border: 1px; position: absolute;44}46td{}{ border: 0; border-color: #aaa; background-color: #ffffff;50}52input.a {}{ border: 1px solid #aaa; background: #99ff66; cursor: pointer;56}58td input {}{ border: 0; background-color: transparent; cursor: pointer;62}64.td_blur {}{ border: 1px solid #aaa; border-right: 0px; border-top: 0px;68}70.td_focus {}{ border: 2px solid #000;72}74a {}{ text-decoration: none; color: #4499ee;77}