网页中模拟Excel电子表格实例分享

原文来自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&&currentHomeTd.childNodes[0].tagName=="INPUT")currentHomeTd.childNodes[0].focus();
           break;
       case 35://End
           if(currentEndTd&&currentEndTd.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}

时间： 2024-10-07 14:10:33

网页中模拟Excel电子表格实例分享的相关文章

一个用php抓取网页中电子邮箱的实例

原文出自: http://outofmemory.cn/code-snippet/36020/php-how-zhuaqu-wangye-youxiangdizhi-code php如何抓取网页中邮箱地址,下面我就给大家分享一个用php抓取网页中电子邮箱的实例. 原文来自: www.pc100.net <?php /** desc:采集网页中的邮箱的代码 link:www.pc100.net date:2013/2/24 */ $url='http://www.pc100.net'; //要采集

在网页中插入百度地图(实例)

步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置.(如下图:) 设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动. 添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息.(如下图

shell脚本中输出带颜色字体实例分享

shell脚本中echo显示内容带颜色显示,需要使用参数-e  格式如下:  echo -e "\033[字背景颜色:文字颜色m字符串\033[0m"  eg:  echo -e "\033[36;34m hello world  \033[0m" echo -e "\033[35;32m Subject:$Ip \033[0m" 其中41的位置代表底色, 36的位置是代表字的颜色 下面提供相应的字和背景颜色,可以尝试找出不同颜色搭配 echo

php获取网页中图片与DIV内容实例

分享下php获取网页中图片.DIV内容的简单方法,都是通过正则表达式实现的. 1.获取网页中所有的图片: <?php //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jbxue.com/'); //取得所有img标签,并储存至二维数组 $match 中 preg_match_all('/<img[^>]*>/i', $text, $match); //打印出match print_r($match); ?>

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件",出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值. 比较实际的解决方案就是模拟操作了,下面我就将演示

imacros实现Excel数据自动录入到网页中

一.工具选择 最近接到一个项目,需要将excel数据逐条录入.保存到网页中.经过搜集资料,能实现功能的大概有以下几种方式,按键精灵.autoit.imacros.python+selenium. 按键精灵:国产模拟键鼠工具,以前用过,存在莫名其妙的bug且广告太多,放弃. autoit:国外模拟键鼠工具,basic类编程风格,好像很长时间未更新,放弃. imacros:兼容firefox.chorme.internet explorer8以上版本,属于浏览器内部插件,经测试完全满足需要. pyt

C#获取网页中某个元素的位置，并模拟点击

我们在开发中,往往要得到网页中某个元素的位置,并且点击它.要模拟一次鼠标点击并不难,只要调用一个API就行了,关键就是怎么样得到这个元素的位置,还有判断是否要滚动滚动条,要滚动多少行能让元素显示出来.当然我们可以动态改变它的CSS,让它在特定的位置显示出来,但这个方法只对比较简单的网页有效. 那我们怎么才能得到网页的位置呢,首先我们来看一张图片 从这里我们可以看到五个offset的属性,这里我们主要利用offsetparent, offsetleft 和offsettop,我们用offsetpa

网页中的内容拷贝到EXCEL之后,有些对象无法删除

大家经常会遇到从某个系统的web页面上Copy内容到Excel中,之后,会发现有一些对象,像多选框,单选框无法删除. 看A1 位置的单选框 选中之后点delete也无法删除,很是急人啊. 不过,想要删除它也非常简单, 首先,点击ctrl+G 打开定位对话框,然后定位所有的对象,点击special  然后选择objects 这样,就选中了所有的对象.然后直接点delete就可以了 网页中的内容拷贝到EXCEL之后,有些对象无法删除

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享 由于目前微信并没有提供这个按钮的官方支持,很多人问我们这个按钮是如何实现的,其实很简单,我们把我们实现的方法分享给大家,希望对那些想在网页端加这个按钮的人有所帮助. 下面是代码(相关参数请自行修改): function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { alert("请先通过微信搜索 添加分享组件提供商友推为好友,通过微信分