JavaScript如何动态创建table表格

两种JavaScript动态创建table表格的方法，分享给大家，具体实现如下
方法一：最原始的方法，创建一一元素

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对象里面含有的函数：插入行和插入列

var tabNode=document.createElement（"table"）;var trNode=tabNode.insertRow（）;var tdNode=trNode.insertCell;tabNode.innerHTML="这是采用table对象里面的函数创建的"注意：利用原始方法，一个个createElement时候，必须要添加一个tbody对象//获取<table>标签的兄弟节点// var node3=tabnode.previousSibling;//前一个节点 获取对此对象的上一个兄弟对象的引用。// alert（"previous--node3:"+node3）;//#text// 如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，// 而低版本IE会直接越过-----不光是<table>节点，其它节点也一样// 表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体

动态的创建和删除：
创建表格，通过输入的值：

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（"输入的行号错误，不能创建表格，请重新输入："）; return;}var cols=parseInt（document.getElementsByName（"cols1"）[0].value）;if（isNaN（cols） || cols<=0）{ alert（"输入的列号错误，不能创建表格，请重新输入："）; return;}//上面确定了 现在开始创建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对象才能删除，所以在创建的时候必须要设置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 ;} }

删除列：

//删除列要麻烦些， 要通过行来进行删除 // 一行的cells的长度就是列的个数 //tab.rows[x].deleteCell（cols-1） function delCols（）{//获得table对象var tab=document.getElementById（"table"）;if（tab==null）{ alert（"删除的表不存在！！"）; return ;}//获得文本框里面的内容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（"输入的行号错误，不能创建表格，请重新输入："）; return;}var cols=parseInt（document.getElementsByName（"cols1"）[0].value）;if（isNaN（cols） || cols<=0）{ alert（"输入的列号错误，不能创建表格，请重新输入："）; return;}//上面确定了 现在开始创建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对象才能删除，所以在创建的时候必须要设置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 ; } } //删除列要麻烦些， 要通过行来进行删除 // 一行的cells的长度就是列的个数 //tab.rows[x].deleteCell（cols-1） function delCols（）{//获得table对象var tab=document.getElementById（"table"）;if（tab==null）{ alert（"删除的表不存在！！"）; return ;}//获得文本框里面的内容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="创建表格" 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动态创建table表格的方法，希望大家喜欢。