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 + "
";
}
$('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