javascript設(shè)置創(chuàng)建動(dòng)態(tài)表格的方法
兩種JavaScript動(dòng)態(tài)創(chuàng)建table表格的方法，分享給大家，具體實(shí)現(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()追加各個(gè)元素a3.appendChild(a4);a2.appendChild(a3);a1.appendChild(a2);
方法二：利用table對(duì)象里面含有的函數(shù)：插入行和插入列
var tabNode=document.createElement("table");var trNode=tabNode.Row();var tdNode=trNode.Cell;tabNode.innerHTML="這是采用table對(duì)象里面的函數(shù)創(chuàng)建的"注意：利用原始方法，一個(gè)個(gè)createElement時(shí)候，必須要添加一個(gè)tbody對(duì)象//獲取
標(biāo)簽的兄弟節(jié)點(diǎn)// var node3=tabnode.previousSibling;//前一個(gè)節(jié)點(diǎn) 獲取對(duì)此對(duì)象的上一個(gè)兄弟對(duì)象的引用。// alert("previous--node3:"+node3);//#text// 如果
節(jié)點(diǎn)，其它節(jié)點(diǎn)也一樣// 表格的', 后面有回車符，高版本的IE和火狐會(huì)識(shí)別成 “空白文本”#text，// 而低版本IE會(huì)直接越過-----不光是
動(dòng)態(tài)的創(chuàng)建和刪除： 標(biāo)簽和標(biāo)簽中間，其實(shí)還隱藏著一個(gè)標(biāo)簽----表格體
創(chuàng)建表格，通過輸入的值：
function createTable(){ tableNode=document.createElement("table");//獲得對(duì)象 tableNode.setAttribute("id","table") var row=parseInt(document.getElementsByName("row1")[0].value);//獲得行號(hào) //alert(row); if(row<=0 || isNaN(row) ){ alert("輸入的行號(hào)錯(cuò)誤，不能創(chuàng)建表格，請(qǐng)重新輸入："); return; } var cols=parseInt(document.getElementsByName("cols1")[0].value); if(isNaN(cols) || cols<=0){ alert("輸入的列號(hào)錯(cuò)誤，不能創(chuàng)建表格，請(qǐng)重新輸入："); return; } //上面確定了 現(xiàn)在開始創(chuàng)建 for(var x=0;x<row;x++){ var trNode=tableNode.Row(); for(var y=0;y<cols;y++){ var tdNode=trNode.Cell(); tdNode.innerHTML="單元格"+(x+1)+"-"+(y+1); } } document.getElementById("div1").appendChild(tableNode);//添加到那個(gè)位置 }
刪除行：
function delRow(){ //要?jiǎng)h除行，必須得到table對(duì)象才能刪除，所以在創(chuàng)建的時(shí)候必須要設(shè)置table對(duì)象的 id 方便操作 var tab=document.getElementById("table");//獲得table對(duì)象 if(tab==null){ alert("刪除的表不存在！") return; } var rows=parseInt(document.getElementsByName("delrow1")[0].value);//獲得要?jiǎng)h除的對(duì)象 if(isNaN(rows)){ alert("輸入的行不正確。請(qǐng)輸入要?jiǎng)h除的行。。。"); return; } if (rows >= 1 && rows <= tab.rows.length) { tab.Row(rows-1); }else{ alert("刪除的行不存在��！"); return ; } }
刪除列：
//刪除列要麻煩些， 要通過行來進(jìn)行刪除 // 一行的cells的長(zhǎng)度就是列的個(gè)數(shù) //tab.rows[x].Cell(cols-1) function delCols(){ //獲得table對(duì)象 var tab=document.getElementById("table"); if(tab==null){ alert("刪除的表不存在��！"); return ; } //獲得文本框里面的內(nèi)容 var cols=parseInt(document.getElementsByName("delcols1")[0].value); //檢查是否可靠 if(isNaN(cols)){ alert("輸入不正確。請(qǐng)輸入要輸出的列。。"); return; } if(!(cols>=1 && cols<tab.rows[0].cells.length)){ alert("您要?jiǎng)h除的行不存在�。�"); 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");//獲得對(duì)象 tableNode.setAttribute("id","table") var row=parseInt(document.getElementsByName("row1")[0].value);//獲得行號(hào) //alert(row); if(row
行:列:
效果演示：
以上就是為大家分享的兩種JavaScript動(dòng)態(tài)創(chuàng)建table表格的方法，希望大家喜歡。
【javascript設(shè)置創(chuàng)建動(dòng)態(tài)表格的方法】相關(guān)文章：
1.javascript數(shù)據(jù)創(chuàng)建方法參考
2.JavaScript創(chuàng)建對(duì)象方法2017最新
4.javascript創(chuàng)建數(shù)組之聯(lián)合數(shù)組的使用方法