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

最新推荐文章于 2021-06-20 21:12:16 发布

weixin_34273046

最新推荐文章于 2021-06-20 21:12:16 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/robinc/90356

版权

<!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; 
}
.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 + "\" οnfοcus=\"this.className='input_on'\" οnblur=\"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="粘贴" οnclick="fnPaste('view')">
<INPUT TYPE="button" class="input_button" value="清空所有数据" >
<INPUT TYPE="button" class="input_button" value="测试"
οnclick="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()" οnpaste="fnPaste('view')"></TEXTAREA>

</BODY>
</HTML>

转载于:https://blog.51cto.com/robinc/90356

weixin_34273046

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Excel模拟程序（区域复制粘贴功能）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 使用table input textarea 模拟excel的复制粘贴功能 </TITLE><META NAME="Generator" CONTE...
复制链接

扫一扫