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表格的方法，希望大家喜欢。