原文来自http://www.6excel.com/doc/20049
一.电子表格中用到的快捷键：
← → ↑ ↓ :左，右，上，下
Home ：当前行的第一列
End ：当前行的最后一列
Shift+Home ：表格的第一列
Shift+End：表格的最后一列
如图：
代码如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>创建在线excel电子表格</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" onclick="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.onload=function(){
document.getElementById("text_1").focus();
var inp_1 = document.getElementById("inp_1");
//当鼠标移动到按钮时改变颜色
inp_1.onmousemove=function(){
this.style.background='#ff6633';
}
inp_1.onmouseout=function(){
this.style.background='#99ff66';
}
inp_1.onclick=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.onclick=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.onkeydown=function(event){
moveFocus(event);
};
//当该输入框得到焦点时,调用alterStyle函数设置本行样式
newIpt.onfocus=function(){
alterStyle("focus",this);
};
//当该输入框失去焦点时,调用alterStyle函数设置本行样式
newIpt.onblur=function(){
alterStyle("blur",this);
};
//当鼠标离开该输入框时,调用alterStyle函数设置本行背景色
newIpt.onmouseout=function(){
alterStyle("out",this);
};
//当鼠标经过该输入框时,调用alterStyle函数设置本行背景色
newIpt.onmouseover=function(){
alterStyle("over",this);
};
}
iptObjs[0].focus();
//为克隆后的超连接对象添加事件
iptObjs=document.getElementsByTagName("a");
for(var i=0;i<iptObjs.length;i++){
iptObjs[i].onclick=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.onkeydown=function(event){
moveFocus(event);
};
//当该输入框得到焦点时,调用alterStyle函数设置本行样式
newIpt.onfocus=function(){
alterStyle("focus",this);
};
//当该输入框失去焦点时,调用alterStyle函数设置本行样式
newIpt.onblur=function(){
alterStyle("blur",this);
};
//如果是每行的最后一个单元格,则在td中创建一个可删除该行的超链接对象
}else{
newIpt=document.createElement("a");
newIpt.setAttribute("href","#");
//当点击该超链接对象时,调用delColumn函数删除当前行
newIpt.onclick=function(){delColumn(this)};
newIpt.innerHTML="删除当前行";
//设置每行最后一个td的右边框显示出来
// newTd.className="rightSideUnit";
newTd.setAttribute("align","center");
}
//当鼠标离开该输入框时,调用alterStyle函数设置本行背景色
newIpt.onmouseout=function(){
alterStyle("out",this);
};
//当鼠标经过该输入框时,调用alterStyle函数设置本行背景色
newIpt.onmouseover=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}
相关推荐
总的来说，《Excel 2016电子表格案例教程》教学演示视频为用户提供了全面的Excel学习路径，无论你是初学者还是有一定经验的用户，都能从中受益，提升自己的Excel技能，更好地应对工作中的数据挑战。通过实际操作和...
本案例中，我们关注的是如何在易语言环境中模拟Excel表格中的鼠标移动效果。易语言是一种中国本土开发的简单易学的编程语言，特别适合初学者。下面将详细介绍这个主题，以及可能涉及的技术点。 首先，我们需要理解...
3. **Excel表格**: Excel是Microsoft Office套件中的一款电子表格软件，常用于数据分析、图表制作等场景。 4. **InternetExplorer.Application对象**: VBA可以通过这个对象模拟浏览器行为，访问网页并获取其内容。 ...
标题中的“电子表格应用于MRPII实例”表明我们将探讨如何使用Excel这种常见的电子表格软件来实现制造资源计划（MRPII）系统中的功能。MRPII是企业资源规划（ERP）的一部分，主要用于优化企业的生产计划和库存管理。 ...
6. 文档格式解析：虽然不是必须，但若要完全模拟Excel的行为，可能需要了解一些基本的电子表格文件格式（如CSV或XLSX），以便在用户操作后保存或加载数据。 7. 错误处理和调试：编写程序时，需要考虑异常情况和错误...
在IT行业中，经常需要将数据库中的数据转换成便于分析和分享的格式，Excel表格就是一种常用的工具。本示例展示了如何使用Node.js实现这一功能，特别是针对MySQL数据库。以下是关于这个主题的详细知识： 首先，我们...
Microsoft Excel，一款广泛使用的电子表格软件，不仅具备强大的数据处理和分析能力，还能通过内置的函数、图表和VBA编程实现复杂模型的构建和仿真。在决策支持系统领域，Excel凭借其直观的用户界面、灵活的数据管理...
其次，“运筹学实验-电子表格.ppt”可能涵盖了一系列实际的运筹学案例，如运输问题、生产计划、资源分配等，通过电子表格进行模拟和优化。这些实验可以帮助我们理解运筹学在实际问题中的应用，并提高解决复杂问题的...
通过这些实例，我们可以深入理解并掌握Excel在数据分析、决策支持、财务管理和模拟预测等领域的高级应用技巧。 1. **10_项目利润状况分析**：在这个案例中，我们将学习如何使用Excel来跟踪和分析项目的盈利状况。这...
标题中的“SpreadSheet”是一个基于WPF（Windows Presentation Foundation）并使用C#编程语言开发的电子表格应用程序，类似于Microsoft Excel。这个项目旨在提供一个自定义的、可编程的电子表格解决方案，供用户进行...
这允许存储和操作大量数据，模拟Excel中的单元格。 - **链表**：在某些复杂场景下，链表可能用于处理不规则的数据，比如不同大小的单元格区域或者带有公式的单元格。 2. 文件操作： - **读写CSV文件**：CSV...
电子表格在化工计算中的应用广泛且深入，是化工工程师日常工作中不可或缺的工具。Excel作为最常见的电子表格软件，凭借其强大的数据处理、分析和可视化能力，为化工行业的各种复杂计算提供了便利。下面我们将详细...
Excel作为Microsoft Office套件中的重要组件，是一款功能强大的电子表格处理软件，广泛应用于数据分析、财务计算、统计分析、项目管理等多个领域。掌握Excel的实用技巧，能够极大地提高工作效率，简化复杂任务的处理...
CSV（逗号分隔值）是一种简单但通用的数据交换格式，可以直接用文本编辑器打开，并被大多数电子表格软件识别。 在"jQuery表格导出excel文件代码"中，可能使用了HTML5的`Blob`和`FileSaver.js`库来创建并保存文件。...
Excel是Microsoft Office套件中的一个强大电子表格程序，被广泛应用于数据分析、财务计算、统计分析、项目管理等多个领域。本EXCEL应用教程实例旨在通过70个日常应用场景，帮助用户深入理解和掌握Excel的各项功能，...
Excel作为一款强大的电子表格软件，广泛应用于数据管理和分析，尤其是在财务管理领域。在工资管理中，Excel可以用于创建工资表，记录员工的基本信息、出勤情况、奖金、扣款等，通过公式计算出每位员工的实际工资。...
在数据分析领域，Excel作为一款强大的电子表格工具，具有直观易用和功能丰富的特点，是许多企业和个人首选的数据分析平台。本课程可能涵盖以下几个核心知识点： 1. 数据清洗：学习如何处理缺失值、异常值、重复值，...
Excel是Microsoft Office套件中的一个强大电子表格工具，被广泛应用于数据分析、财务计算、统计分析、项目管理等领域。本压缩包“Excel学习资料（配套练习题素材）.rar”提供了丰富的资源，帮助用户深入理解和掌握...
字体高清，书签完美，本书在对Excel技术论坛上上百万个提问的分析与提炼的基础上，汇集了用户在使用Excel进行数据处理与分析过程中最常见的需求，通过270多个实例的演示与讲解，将Excel高手的过人技巧手把手教给读者...