javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下
方法一:最原始的方法,創建一一元素
var a1=teElement("table");var a2=teElement("tbody");var a3=teElement("tr");var a4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);ndChild(a2);
方法二:利用table對象裏面含有的函數:插入行和插入列
var tabNode=teElement("table");var trNode=();var tdNode=;rHTML="這是採用table對象裏面的函數創建的"注意:利用原始方法,一個個createElement時候,必須要添加一個tbody對象//獲取
標籤的兄弟節點// var node3=iousSibling;//前一個節點 獲取對此對象的上一個兄弟對象的引用。// alert("previous--node3:"+node3);//#text// 如果
節點,其它節點也一樣// 表格的, 後面有回車符,高版本的IE和火狐會識別成 “空白文本”#text,// 而低版本IE會直接越過-----不光是
動態的創建和刪除: 標籤和標籤中間,其實還隱藏着一個標籤----表格體
創建表格,通過輸入的值:
function createTable(){ tableNode=teElement("table");//獲得對象 ttribute("id","table") var row=parseInt(lementsByName("row1")[0]e);//獲得行號 //alert(row); if(row<=0 || isNaN(row) ){ alert("輸入的行號錯誤,不能創建表格,請重新輸入:"); return; } var cols=parseInt(lementsByName("cols1")[0]e); if(isNaN(cols) || cols<=0){ alert("輸入的列號錯誤,不能創建表格,請重新輸入:"); return; } //上面確定了 現在開始創建 for(var x=0;x<row;x++){ var trNode=(); for(var y=0;y<cols;y++){ var tdNode=(); rHTML="單元格"+(x+1)+"-"+(y+1); } } lementById("div1")ndChild(tableNode);//添加到那個位置 }
刪除行:
function delRow(){ //要刪除行,必須得到table對象才能刪除,所以在創建的時候必須要設置table對象的 id 方便操作 var tab=lementById("table");//獲得table對象 if(tab==null){ alert("刪除的表不存在!") return; } var rows=parseInt(lementsByName("delrow1")[0]e);//獲得要刪除的'對象 if(isNaN(rows)){ alert("輸入的行不正確。請輸入要刪除的行。。。"); return; } if (rows >= 1 && rows <= th) { (rows-1); }else{ alert("刪除的行不存在!!"); return ; } }
刪除列:
//刪除列要麻煩些, 要通過行來進行刪除 // 一行的cells的長度就是列的個數 //[x](cols-1) function delCols(){ //獲得table對象 var tab=lementById("table"); if(tab==null){ alert("刪除的表不存在!!"); return ; } //獲得文本框裏面的內容 var cols=parseInt(lementsByName("delcols1")[0]e); //檢查是否可靠 if(isNaN(cols)){ alert("輸入不正確。請輸入要輸出的列。。"); return; } if(!(cols>=1 && cols<[0]th)){ alert("您要刪除的行不存在!!"); return; } for(var x=0;x<th;x++){//所有的行 [x](cols-1); } }
完整的代碼:
table{ border:#00ffff solid 2px; border-collapse:collapse; } td{ border:#8080ff solid 2px; padding:10px; }
var tableNode; function createTable(){ tableNode=teElement("table");//獲得對象 ttribute("id","table") var row=parseInt(lementsByName("row1")[0]e);//獲得行號 //alert(row); if(row
行:列:
效果演示:
以上就是為大家分享的兩種JavaScript動態創建table表格的方法,希望大家喜歡。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
JavaScript數組去重的四種方法
javascript數組去重方法彙總ue1=function(){varn=[];//一個新的臨時數組for(vari=0;i<th;i++)//遍歷當前數組{//如果當前數組的第i已經保存進了臨時數組,那麼跳過,//否則把當前項push到臨時數組裏面if(xOf(this[i])==-1)(this[i]);}returnn;};ue2=function(){var...
-
python批量生成本地ip地址的方法是什麼
python批量生成本地ip地址的方法是什麼呢?本文實例講述了python批量生成本地ip地址的方法。分享給大家供大家參考。具體分析如下:...
-
JavaScript經典效果集錦
些很實用且必用的小腳本代碼:腳本1:進入主頁以後自動播放聲音腳本2:進入主頁後自動最大話,省的去在自己單擊了To(0,0)zeTo(lWidth,lHeight)腳本3:顯示現在時間的腳本enow腳本4:顯示最後修改時間的.腳本e(Modified)腳本5:設為首頁,加為收藏,加入頻道,啟動outlook...