网页中模拟Excel电子表格实例分享
2019獨角獸企業重金招聘Python工程師標準>>>
原文來自http://www.6excel.com/doc/20049
?一.電子表格中用到的快捷鍵：
← → ↑ ↓? :左，右，上，下
Home ：當前行的第一列
End??：當前行的最后一列
Shift+Home?：表格的第一列
?Shift+End：表格的最后一列
如圖：
代碼如下：
<%@ 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" οnclick="sub()"><br>
??? </div>
??? <div id="div3"></div>
? </body>
</html>
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.οnlοad=function(){
? ?document.getElementById("text_1").focus();
? ?var inp_1 = document.getElementById("inp_1");
? ?//當鼠標移動到按鈕時改變顏色
? ?inp_1.οnmοusemοve=function(){
? ? ? ?this.style.background='#ff6633';
? ?}
? ?inp_1.οnmοuseοut=function(){
? ? ? ?this.style.background='#99ff66';
? ?}
? ?inp_1.οnclick=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.οnclick=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.οnkeydοwn=function(event){
? ? ? ? ? ?moveFocus(event);
? ? ? ?};
? ? ? ?//當該輸入框得到焦點時,調用alterStyle函數設置本行樣式
? ? ? ?newIpt.οnfοcus=function(){
? ? ? ? ? ?alterStyle("focus",this);
? ? ? ?};
? ? ? ?//當該輸入框失去焦點時,調用alterStyle函數設置本行樣式
? ? ? ?newIpt.οnblur=function(){
? ? ? ? ? ?alterStyle("blur",this);
? ? ? ?};
? ? ? ?//當鼠標離開該輸入框時,調用alterStyle函數設置本行背景色
? ? ? ?newIpt.οnmοuseοut=function(){
? ? ? ? ? ?alterStyle("out",this);
? ? ? ?};
? ? ? ?//當鼠標經過該輸入框時,調用alterStyle函數設置本行背景色
? ? ? ?newIpt.οnmοuseοver=function(){
? ? ? ? ? ?alterStyle("over",this);
? ? ? ?};
? ?}
? ?iptObjs[0].focus();
? ?//為克隆后的超連接對象添加事件
? ?iptObjs=document.getElementsByTagName("a");
? ?for(var i=0;i<iptObjs.length;i++){
? ? ? ?iptObjs[i].οnclick=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.οnkeydοwn=function(event){
? ? ? ? ? ? ? ?moveFocus(event);
? ? ? ? ? ?};
? ? ? ? ? ?//當該輸入框得到焦點時,調用alterStyle函數設置本行樣式
? ? ? ? ? ?newIpt.οnfοcus=function(){
? ? ? ? ? ? ? ?alterStyle("focus",this);
? ? ? ? ? ?};
? ? ? ? ? ?//當該輸入框失去焦點時,調用alterStyle函數設置本行樣式
? ? ? ? ? ?newIpt.οnblur=function(){
? ? ? ? ? ? ? ?alterStyle("blur",this);
? ? ? ? ? ?};
? ? ? ? ? ?
? ? ? ?//如果是每行的最后一個單元格,則在td中創建一個可刪除該行的超鏈接對象 ? ? ? ?
? ? ? ?}else{
? ? ? ? ? ?newIpt=document.createElement("a");
? ? ? ? ? ?newIpt.setAttribute("href","#");
? ? ? ? ? ?//當點擊該超鏈接對象時,調用delColumn函數刪除當前行
? ? ? ? ? ?newIpt.οnclick=function(){delColumn(this)};
? ? ? ? ? ?newIpt.innerHTML="刪除當前行";
? ? ? ? ? ?//設置每行最后一個td的右邊框顯示出來
? ?// ? ? ? ?newTd.className="rightSideUnit";
? ? ? ? ? ?newTd.setAttribute("align","center");
? ? ? ?}
? ? ? ?//當鼠標離開該輸入框時,調用alterStyle函數設置本行背景色
? ? ? ?newIpt.οnmοuseοut=function(){
? ? ? ? ? ?alterStyle("out",this);
? ? ? ?};
? ? ? ?//當鼠標經過該輸入框時,調用alterStyle函數設置本行背景色
? ? ? ?newIpt.οnmοuseοver=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&¤tHomeTd.childNodes[0].tagName=="INPUT")currentHomeTd.childNodes[0].focus();
? ? ? ? ? ?break;
? ? ? ?case 35://End
? ? ? ? ? ?if(currentEndTd&¤tEndTd.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}
轉載于:https://my.oschina.net/yidongkaifa/blog/336726
總結
以上是生活随笔為你收集整理的网页中模拟Excel电子表格实例分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bitmap文件格式分析
- 下一篇： mybatis3.2.8 与 hiber