網頁中模擬Excel電子表格實例分享

時間 2019-12-07

標籤網頁模擬 excel 電子表格實例分享欄目 HTML 简体版

原文原文鏈接

原文來自http://www.6excel.com/doc/20049javascript

一.電子表格中用到的快捷鍵：css

← → ↑ ↓ :左，右，上，下html

Home ：當前行的第一列java

End ：當前行的最後一列web

Shift+Home ：表格的第一列app

Shift+End：表格的最後一列ide

如圖：函數

代碼以下：ui

<%@ 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>this

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}