Excel模拟程序（区域复制粘贴功能）

最新推荐文章于 2021-06-20 21:12:16 发布
原创最新推荐文章于 2021-06-20 21:12:16 发布 · 250 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#Excel #正则表达式 #单元测试 #J# #交通
软件开发专栏收录该内容
15 篇文章
订阅专栏
本文介绍了一种使用HTML和JavaScript模拟Excel复制粘贴功能的方法。通过定义样式和编写脚本来实现类似Excel的表格结构，并支持数据的复制与粘贴操作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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