JavaScript如何動態(tài)創(chuàng)建table表格
兩種JavaScript動態(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()追加各個元素 a3.appendChild(a4); a2.appendChild(a3); a1.appendChild(a2);
方法二:利用table對象里面含有的函數(shù):插入行和插入列
var tabNode=document.createElement("table"); var trNode=tabNode.insertRow(); var tdNode=trNode.insertCell; tabNode.innerHTML="這是采用table對象里面的函數(shù)創(chuàng)建的" 注意:利用原始方法,一個個createElement時候,必須要添加一個tbody對象 //獲取<table>標(biāo)簽的兄弟節(jié)點(diǎn) // var node3=tabnode.previousSibling;//前一個節(jié)點(diǎn) 獲取對此對象的上一個兄弟對象的引用。 // alert("previous--node3:"+node3);//#text // 如果<table>后面有回車符,高版本的IE和火狐會識別成 “空白文本”#text, // 而低版本IE會直接越過-----不光是<table>節(jié)點(diǎn),其它節(jié)點(diǎn)也一樣 // 表格的,<table>標(biāo)簽和<tr>標(biāo)簽中間,其實(shí)還隱藏著一個<tbody>標(biāo)簽----表格體
動態(tài)的創(chuàng)建和刪除:
創(chuàng)建表格,通過輸入的值:
function createTable(){ tableNode=document.createElement("table");//獲得對象 tableNode.setAttribute("id","table") var row=parseInt(document.getElementsByName("row1")[0].value);//獲得行號 //alert(row); if(row<=0 || isNaN(row) ){ alert("輸入的行號錯誤,不能創(chuàng)建表格,請重新輸入:"); return; } var cols=parseInt(document.getElementsByName("cols1")[0].value); if(isNaN(cols) || cols<=0){ alert("輸入的列號錯誤,不能創(chuàng)建表格,請重新輸入:"); return; } //上面確定了 現(xiàn)在開始創(chuàng)建 for(var x=0;x<row;x++){ var trNode=tableNode.insertRow(); for(var y=0;y<cols;y++){ var tdNode=trNode.insertCell(); tdNode.innerHTML="單元格"+(x+1)+"-"+(y+1); } } document.getElementById("div1").appendChild(tableNode);//添加到那個位置 }
刪除行:
function delRow(){ //要刪除行,必須得到table對象才能刪除,所以在創(chuàng)建的時候必須要設(shè)置table對象的 id 方便操作 var tab=document.getElementById("table");//獲得table對象 if(tab==null){ alert("刪除的表不存在!") return; } var rows=parseInt(document.getElementsByName("delrow1")[0].value);//獲得要刪除的對象 if(isNaN(rows)){ alert("輸入的行不正確。請輸入要刪除的行。。。"); return; } if (rows >= 1 && rows <= tab.rows.length) { tab.deleteRow(rows-1); }else{ alert("刪除的行不存在!!"); return ; } }
刪除列:
//刪除列要麻煩些, 要通過行來進(jìn)行刪除 // 一行的cells的長度就是列的個數(shù) //tab.rows[x].deleteCell(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].deleteCell(cols-1); } }
完整的代碼:
<!DOCTYPE html> <html> <head> <title>createTable2.html</title> <style type="text/css"> table{ border:#00ffff solid 2px; border-collapse:collapse; } td{ border:#8080ff solid 2px; padding:10px; } </style> <script type="text/javascript"> var tableNode; function createTable(){ tableNode=document.createElement("table");//獲得對象 tableNode.setAttribute("id","table") var row=parseInt(document.getElementsByName("row1")[0].value);//獲得行號 //alert(row); if(row<=0 || isNaN(row) ){ alert("輸入的行號錯誤,不能創(chuàng)建表格,請重新輸入:"); return; } var cols=parseInt(document.getElementsByName("cols1")[0].value); if(isNaN(cols) || cols<=0){ alert("輸入的列號錯誤,不能創(chuàng)建表格,請重新輸入:"); return; } //上面確定了 現(xiàn)在開始創(chuàng)建 for(var x=0;x<row;x++){ var trNode=tableNode.insertRow(); for(var y=0;y<cols;y++){ var tdNode=trNode.insertCell(); tdNode.innerHTML="單元格"+(x+1)+"-"+(y+1); } } document.getElementById("div1").appendChild(tableNode);//添加到那個位置 } function delRow(){ //要刪除行,必須得到table對象才能刪除,所以在創(chuàng)建的時候必須要設(shè)置table對象的 id 方便操作 var tab=document.getElementById("table");//獲得table對象 if(tab==null){ alert("刪除的表不存在!") return; } var rows=parseInt(document.getElementsByName("delrow1")[0].value);//獲得要刪除的對象 if(isNaN(rows)){ alert("輸入的行不正確。請輸入要刪除的行。。。"); return; } if (rows >= 1 && rows <= tab.rows.length) { tab.deleteRow(rows-1); }else{ alert("刪除的行不存在??!"); return ; } } //刪除列要麻煩些, 要通過行來進(jìn)行刪除 // 一行的cells的長度就是列的個數(shù) //tab.rows[x].deleteCell(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].deleteCell(cols-1); } } </script> </head> <body> 行:<input type="text" name="row1"/> 列:<input type="text" name="cols1"/> <input type="button" value="創(chuàng)建表格" onclick="createTable()"/><br/> <input type="text" name="delrow1"/> <input type="button" value="刪除行" onclick="delRow()"/><br/> <input type="text" name="delcols1"/> <input type="button" value="刪除列" onclick="delCols()"/><br> <div id="div1"></div> </body> </html>
效果演示:
以上就是為大家分享的兩種JavaScript動態(tài)創(chuàng)建table表格的方法,希望大家喜歡。
相關(guān)文章
基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹
這篇文章主要為大家詳細(xì)介紹了基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果
我將用最通俗的語言和最簡潔的代碼給大家演示如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果2013-09-09JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊列結(jié)構(gòu)詳解
隊列指的是一種受限的線性表,先進(jìn)先出,今天通過本文帶領(lǐng)大家認(rèn)識隊列及隊列的應(yīng)用,對JS數(shù)據(jù)結(jié)構(gòu)與算法-隊列結(jié)構(gòu)相關(guān)知識感興趣的朋友一起看看吧2022-11-11微信小程序?qū)崿F(xiàn)滑動切換自定義頁碼的方法分析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動切換自定義頁碼的方法,結(jié)合實(shí)例形式分析了微信小程序頁碼動態(tài)切換相關(guān)實(shí)現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-12-12JS 參數(shù)傳遞的實(shí)際應(yīng)用代碼分析
在項目中,有一個Ajax加載的區(qū)域,是一個Div標(biāo)簽,id為msg_box,這個控制鏈接包含在一個左側(cè)的導(dǎo)航中,當(dāng)從其他頁面鏈接到這個頁面時,該JS代碼就失效了。2009-09-09