`
werwolf
  • 浏览: 90375 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Excel模拟程序(区域复制粘贴功能)

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 使用table input textarea 模拟excel的复制粘贴功能 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Robin.c">
<META NAME="Keywords" CONTENT="模拟excel">
<META NAME="Description" CONTENT="i love feiEr">
<style>
.tableNoArea {
 BORDER-RIGHT: #A52A2A 1px solid; 
 BORDER-LEFT: #A52A2A 1px solid; 
 BORDER-TOP: #A52A2A 1px solid; 
 border-Bottom : #A52A2A 1px solid; 
}
.tdNoArea {  
  BORDER-RIGHT: #A52A2A 1px solid; 
  BORDER-TOP: #A52A2A 1px solid; 
  BORDER-BOTTOM: #A52A2A 1px solid; 
  BORDER-LEFT: #A52A2A 1px solid; 
}
.table1 {
 BORDER-RIGHT: #A52A2A 1px solid; 
 BORDER-LEFT: #A52A2A 1px solid; 
 BORDER-TOP: #A52A2A 1px solid; 
 border-Bottom : #A52A2A 1px solid; 
}
.td1 {  
  BORDER-RIGHT: #A52A2A 1px solid; 
  BORDER-TOP: #A52A2A 1px solid; 
  BORDER-BOTTOM: #A52A2A 1px solid; 
  BORDER-LEFT: #A52A2A 1px solid;
  background-color:buttonface; 
}
.input_button{ 
 border-top:1px solid #A52A2A ;
 border-right:1px solid #A52A2A ;   
 border-bottom:1px solid #A52A2A ;
 border-left:1px solid #A52A2A ;
    background-color:#F0F8FF; 
}
.input_title{ 
 border-top:0px solid #A52A2A ;
 border-right:0px solid #A52A2A ;   
 border-bottom:0px solid #A52A2A ;
 border-left:0px solid #A52A2A ;
    background-color:buttonface; 
}
input{
 margin-bottom:0px;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 border-top:0px solid #A52A2A ;
 border-right:0px solid #A52A2A ;   
 border-bottom:0px solid #A52A2A ;
 border-left:0px solid #A52A2A ;
}
.input_on{ 
 margin-bottom:0px;
 margin-left:1px;
 margin-right:0px;
 margin-top:0px;
 border-top:0px solid #A52A2A ;
 border-right:0px solid #A52A2A ;   
 border-bottom:0px solid #A52A2A ;
 border-left:0px solid #A52A2A ;
    background-color:7CFC00; <!-- FFFFCC -->
}
.staCss{
 border-top:1px solid #A52A2A ;
 border-right:1px solid #A52A2A ;   
 border-bottom:1px solid #A52A2A ;
 border-left:1px solid #A52A2A ;
    background-color:#F0F8FF; 
 color:#000000;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var strT ="";  //保存粘贴来的数据
var curObjId;  //当前单元的id
var tableName ="重点区域信息";//表名称
//左表头数组,包含项目名,从第二个元素开始是左表头值
var valueLeftArray =["区域/项目", "北京", "上海","天津", "重庆", "广州","秦皇岛", "衡水", "石家庄","沈阳", "大连"];
var valueTopArray =["家庭户", "集体户","人口数", "财政总收入(亿)", "经济波动幅度","林业", "水利", "旅游业","交通运输", "商业金融"];//上表头数组
function $(id){ return( document.getElementById(id));}
//状态栏显示内容
function opStaBar(value){
 $("staBar").innerText =value ;
}
//创建表头
function createTableName(valueName)
{
 //$("staBar").innerText = "此时状态--" + value ;
 if(valueName ==undefined){valueName="noName";}
 $("excelTil").innerHTML ="<center>" + valueName + "</center>";
}
//创建左表头
function createLeftHead(valueLeft)
{
 $("excelCon").innerHTML =" <TABLE style='border-collapse:collapse;table-layout:fixed;width:100%'><TR><TD class=\"td1\">" +valueLeft[0]+ "</TD></TR></TABLE>";
 var Temp ="<TABLE style='border-collapse:collapse;table-layout:fixed;width:100%'>";
 for(i=1;i<valueLeft.length;i++)
 {
  //alert(valueLeft.length );
  Temp += "<TR><TD class=\"td1\" width=\"148px\"><INPUT id=\"inputLeft" + i + "\" TYPE=\"text\" value=\"" + valueLeft[i] + "\" class=\"input_title\" readOnly=\"true\"></TD></TR>";
 }
 $("excelLeftHead").innerHTML =Temp +"</TABLE>";
}
//创建上表头
function createTopHead(valueTop)
{
 var Temp ="<TABLE style='border-collapse:collapse;table-layout:fixed;width:100%'><TR>";
 for(i=0;i<valueTop.length;i++)
 {
  Temp += "<TD class=\"td1\" id=\"tdTop" + (i+1) + "\" width=\"148px\">" +valueTop[i]+ "</TD>";
 }
 $("excelTopHead").innerHTML =Temp +"</TR></TABLE>";
}
//创建表格 ,id:表格"容器"的id  row-col:创建的表格行列数
function createTable(id,row,col)
{
 var strTable ="<table id=\"objTable\" class=\"tableNoArea\" style='border-collapse:collapse;table-layout:fixed;width:100%'>"; //表开始--表使用input输入框排列而成
 for(i=1; i<=row;i++)
 {
  strTable =strTable + "<tr id=\"TR" + i + "\" >"; //行开始   单元格id举例:CEll_2_5 代表第二行伍列
  for(j=1;j<=col;j++)
  {
   strTable =strTable + "<td id=\"TD" + j + "\" class=\"tdNoArea\">" +  "<input TYPE=\"text\" name=\"DataArea\" id=\"CELL_" + i + "_"+ j + "\" onfocus=\"this.className='input_on'\" onblur=\"this.className='input';cellLostFocus(this);\" onclick =\"setCurCellId(this);\"></td>" ;
  }  
  strTable =strTable + "</tr>"; //行结束 
 }
 $(id).innerHTML =strTable + "</table >"; //表结束
 
}
//将当前单元格id保存于curObjId中,(每当点击单元都调用此函数,更新变量)
function setCurCellId(ob)
{ 
 curObjId =ob.id
 setBgcolor(ob);
 opStaBar("此时激活的单元格id是:" + curObjId);
 
}
//设置单元格点击左表头上表头状态
function setBgcolor(ob)
{
 var curLoopRow =curObjId.split("_")[1]; //行数
 var curLoopCol =curObjId.split("_")[2]; //列数
 $("tdTop" + curLoopCol).style.backgroundColor='beige'; 
 $("inputLeft" + curLoopRow).style.backgroundColor='beige'; 
}
//表格失去焦点时事件
function cellLostFocus(ob)
{
 //this.className='input';
 var curLoopRow =curObjId.split("_")[1]; //行数
 var curLoopCol =curObjId.split("_")[2]; //列数
 $("tdTop" + curLoopCol).style.backgroundColor='buttonface'; 
 $("inputLeft" + curLoopRow).style.backgroundColor='buttonface'; 
}
// 启用粘贴快捷菜单项目,该项目在 DIV 上时默认也为无效
function fnBeforePaste()
{
 event.returnValue = false;
}
// 在 onpaste 中取消 returnValue 以便输入文本,该操作有默认的行为 
function fnPaste(id) 
{
 event.returnValue = false;
 $(id).innerText = window.clipboardData.getData("Text");
 strT =$(id).innerText;
 //alert($(id).innerText);
 fillToTable();   //填表
}
// 填表
function fillToTable()
{   
 if(curObjId ==undefined)
   {
  alert("***未选择起始单元格,默认为第一个单元格***");
  curObjId ="CEll_1_1";
   }
 var arrayTable, re, b, re2, rowCounter, colCounter ;  // 声明变量
 var re = /\r/g;      // 创建正则表达式模式 取得行(回车)
 var re2=/\t/g;      // 创建正则表达式模式  取得列(制表符)
    arrayTable = strT.split(re);   //将数据以行为单位装入数组
 rowCounter = arrayTable.length;  //表格行数
 colCounter = arrayTable[0].split(re2).length; //表格列数
 var curLoopRow =curObjId.split("_")[1]; //行数
 for(i=1;i<=rowCounter;i++)
 {
  var curLoopCol =curObjId.split("_")[2]; //列数
  
  //alert(curLoop +"列数");
  for(j=1;j<=colCounter;j++)
  {
   //alert(curLoop +"将填充列");
   var tempV =parseFloat(arrayTable[i-1].split(re2)[j-1]);
   if(isNaN(tempV)){tempV="";} //处理数据项是空白或空格的情况
   try{
    $("CEll_" + curLoopRow +  "_" + curLoopCol).innerText = tempV; 
    throw "粘贴区域越界";
   }
   catch(e)
   {
    //alert(e);
    opStaBar("警报:粘贴区域越界.");
   }
   curLoopCol++;
  
  }
  curLoopRow++;
 }
 }
//从数据区域复制数据
function copyDate(row, col)
{
 var eles =document.getElementsByName("DataArea");
 var elesLength =eles.length;
 var str =""; 
 for(i=0;i<row;i++)
 {
  for(j=0;j<col;j++)
  {   
   str = str + eles[i.toString() + j.toString()].value + "\t";
  }
  str = str + "\n";
   
 }
 $('view').innerText =str;
 window.clipboardData.setData("Text",str);
 opStaBar("数据已经复制到系统剪贴板中."); 
}
//-->
</SCRIPT>
</HEAD>
<BODY>
Excel模拟程序 for by richeehill <br>
<INPUT TYPE="button" class="input_button" value="1创建表名称" >
<INPUT TYPE="button" class="input_button" value="2创建左表头" >
<INPUT TYPE="button" class="input_button" value="3创建上表头" >
<INPUT TYPE="button" class="input_button" value="4生成表" >
<INPUT TYPE="button" class="input_button" value="复制此表" >
<INPUT TYPE="button" class="input_button" value="粘贴"  onclick="fnPaste('view')">
<INPUT TYPE="button" class="input_button" value="清空所有数据" >
<INPUT TYPE="button" class="input_button" value="测试" 
onclick="createTableName(tableName);createLeftHead(valueLeftArray);createTopHead(valueTopArray);createTable('divDate',10,10);">
<hr>
<!-- 表名称 -->
<DIV ALIGN="" class="staCss" id="excelTil" name="excelTil" STYLE="height=3%;width=100%;" > </DIV>
<!-- 表格区域    开始-->
<DIV ALIGN="" id="tableDiv"  STYLE="overflow:scroll; height=60%;width=100%;"> 
   <TABLE class="table1" >
   <TR>
    <TD id="excelCon"> <!-- 项目表头 -->
      项目 
    </TD>
    <TD id="excelTopHead"><!-- 上表头 -->
      上表头 
    </TD>
   </TR>
   <TR>
    <TD id="excelLeftHead"><!-- 左表头 -->
      左表头
    </TD>
    <TD><!-- 数据区 -->
      <DIV ALIGN="" id="divDate">数据区域</DIV> 
    </TD>
   </TR>
   </TABLE>
</DIV>
<!-- 表格区域    结束-->
<DIV ALIGN="" class="staCss" id="staBar" name="staBar" STYLE="height=1%;width=100%">状态栏:</DIV>
<TEXTAREA NAME="" ROWS="3" COLS="130" id="view" onbeforepaste="fnBeforePaste()" onpaste="fnPaste('view')"></TEXTAREA>
</BODY>
</HTML>

 Track:http://richeehill.blog.51cto.com/439699/90356

分享到:
评论

相关推荐

    EXCEL集成工具箱V6.0

    本工具相对于同类工具有不破坏背景色、条件格式、复制粘贴和撤消功能之优点。 【高级背景选择】 背景着色的高级功能,支持行着色、列着色、行与列同时着色共3种方式供选择。 快捷取数 【快捷取数列】 随存储格即时...

    EXCEL集成工具箱V8.0完整增强版(精简)

    本工具相对于同类工具有不破坏背景色、条件格式、复制粘贴和撤消功能之优点。 【高级背景选择】 背景着色的高级功能,支持行着色、列着色、行与列同时着色共3种方式供选择。 快捷取数 【快捷取数列】 随存储格...

    00018《计算机应用基础》复习题.doc

    计算机应用基础 模拟题 1.计算机软件系统包括 ( 系统软件 应用软件 ) 2.在计算机中,一个字节由 8 位( 二进制 ) 3.计算机中用来表示内存储器容量大小的最基本单位是( 字节 )。 4.计算机术语中IT,表示( ...

    C#程序开发范例宝典(第2版).part08

    实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 ...

    C#程序开发范例宝典(第2版).part12

    实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 ...

    C#程序开发范例宝典(第2版).part13

    实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 ...

    C#程序开发范例宝典(第2版).part02

    实例052 屏蔽TextBox控件上的粘贴功能 61 实例053 屏蔽TextBox控件上默认的右键菜单 62 2.2 ComboBox控件应用 63 实例054 美化ComboBox控件下拉列表 63 实例055 用ComboBox控件制作浏览器网址输入框 64 2.3 ...

    22春“计算机科学与技术”专业《计算机基础》在线作业含答案参考10.docx

    A、粘贴 B、替换 C、清除 D、复制 参考答案:D 12. 在控制面板中,使用"添加/删除程序"的作用是:( ) A.设置字体 B.卸载/安装程序 C.设置显示属性 D.安装未知新设备 参考答案:B 13. Python的工作方式包括交互式和...

    delphi 开发经验技巧宝典源码

    0206 如何在DBGrid中实现复制、粘贴功能 137 0207 在DBGrid中将选中的多行删除 137 0208 在DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另一个ListBox中 139 0210 把DBGrid中的数据...

    易语言 茶凉专用模块

    子程序 超级截图, 字节集, 公开, 截取窗口或屏幕中指定区域图片(返回图片字节集,失败返回空字节集) .参数 窗口句柄, 整数型, 可空, 默认为屏幕中.指定窗口句柄,则以窗口客户区内坐标点 .参数 左上顶点_X, 整数型, 可...

Global site tag (gtag.js) - Google Analytics