javascript設置創(chuàng)建動態(tài)表格的方法

時間：2024-09-19 07:06:12 JavaScript

　　兩種JavaScript動態(tài)創(chuàng)建table表格的方法，分享給大家，具體實現(xiàn)如下

　　方法一：最原始的方法，創(chuàng)建一一元素

　　var a1=document.createElement("table");var a2=document.createElement("tbody");var a3=document.createElement("tr");var a4=document.createElement("td");//開始appendchild()追加各個元素a3.appendChild(a4);a2.appendChild(a3);a1.appendChild(a2);

　　方法二：利用table對象里面含有的函數(shù)：插入行和插入列

　　var tabNode=document.createElement("table");var trNode=tabNode.Row();var tdNode=trNode.Cell;tabNode.innerHTML="這是采用table對象里面的函數(shù)創(chuàng)建的"注意：利用原始方法，一個個createElement時候，必須要添加一個tbody對象//獲取

　　標簽的兄弟節(jié)點// var node3=tabnode.previousSibling;//前一個節(jié)點獲取對此對象的上一個兄弟對象的引用。// alert("previous--node3:"+node3);//#text// 如果

　　節(jié)點，其它節(jié)點也一樣// 表格的, 后面有回車符，高版本的IE和火狐會識別成 “空白文本”#text，// 而低版本IE會直接越過-----不光是

　　動態(tài)的創(chuàng)建和刪除：標簽和標簽中間，其實還隱藏著一個標簽----表格體

　　創(chuàng)建表格，通過輸入的值：

　　刪除行：

　　刪除列：

　　//刪除列要麻煩些，要通過行來進行刪除 // 一行的cells的長度就是列的個數(shù) //tab.rows[x].Cell(cols-1) function delCols(){ //獲得table對象 var tab=document.getElementById("table"); if(tab==null){ alert("刪除的表不存在！！"); return ; } //獲得文本框里面的內(nèi)容 var cols=parseInt(document.getElementsByName("delcols1")[0].value); //檢查是否可靠 if(isNaN(cols)){ alert("輸入不正確。請輸入要輸出的列。。"); return; } if(!(cols>=1 && cols<tab.rows[0].cells.length)){ alert("您要刪除的行不存在！！"); return; } for(var x=0;x<tab.rows.length;x++){//所有的行 tab.rows[x].Cell(cols-1); } }

　　完整的代碼：

　　table{ border:#00ffff solid 2px; border-collapse:collapse; } td{ border:#8080ff solid 2px; padding:10px; }

　　var tableNode; function createTable(){ tableNode=document.createElement("table");//獲得對象 tableNode.setAttribute("id","table") var row=parseInt(document.getElementsByName("row1")[0].value);//獲得行號 //alert(row); if(row

　　行:列:

　　效果演示：

　　以上就是為大家分享的兩種JavaScript動態(tài)創(chuàng)建table表格的方法，希望大家喜歡。

【javascript設置創(chuàng)建動態(tài)表格的方法】相關文章：

JavaScript常用方法匯總10-25

JavaScript數(shù)組常用方法介紹09-04

javascript跨域訪問的方法07-09

javascript編程異常處理的方法08-04

JavaScript fontcolor方法入門實例07-07