這篇文章主要介紹了JavaScript如何動(dòng)態(tài)創(chuàng)建table表格，一些時(shí)候需要?jiǎng)討B(tài)的創(chuàng)建和刪除表格，接下來(lái)的文章中將為大家介紹下javascript是如何做到的，感興趣的朋友不要錯(cuò)過(guò)

兩種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");
//開(kāi)始appendchild()追加各個(gè)元素

a3.appendChild(a4);
a2.appendChild(a3);
a1.appendChild(a2);

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

var tabNode=document.createElement("table");

var trNode=tabNode.insertRow();

var tdNode=trNode.insertCell;

tabNode.innerHTML="這是采用table對(duì)象里面的函數(shù)創(chuàng)建的"
注意：利用原始方法，一個(gè)個(gè)createElement時(shí)候，必須要添加一個(gè)tbody對(duì)象
//獲取<table>標(biāo)簽的兄弟節(jié)點(diǎn)
// var node3=tabnode.previousSibling;//前一個(gè)節(jié)點(diǎn) 獲取對(duì)此對(duì)象的上一個(gè)兄弟對(duì)象的引用。
// alert("previous--node3:"+node3);//#text
// 如果<table>后面有回車(chē)符，高版本的IE和火狐會(huì)識(shí)別成 “空白文本”#text，
// 而低版本IE會(huì)直接越過(guò)-----不光是<table>節(jié)點(diǎn)，其它節(jié)點(diǎn)也一樣
// 表格的,<table>標(biāo)簽和<tr>標(biāo)簽中間，其實(shí)還隱藏著一個(gè)<tbody>標(biāo)簽----表格體

動(dòng)態(tài)的創(chuàng)建和刪除：
創(chuàng)建表格，通過(guò)輸入的值：

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)在開(kāi)始創(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);//添加到那個(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.deleteRow(rows-1); 
  }else{ 
  alert("刪除的行不存在?。?); 
  return ; 
  } 
  
 }

刪除列：

//刪除列要麻煩些， 要通過(guò)行來(lái)進(jìn)行刪除 
 // 一行的cells的長(zhǎng)度就是列的個(gè)數(shù) 
 //tab.rows[x].deleteCell(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].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");//獲得對(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)在開(kāi)始創(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);//添加到那個(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.deleteRow(rows-1); 
  }else{ 
   alert("刪除的行不存在?。?); 
   return ; 
  } 
  
 } 
 //刪除列要麻煩些， 要通過(guò)行來(lái)進(jìn)行刪除 
 // 一行的cells的長(zhǎng)度就是列的個(gè)數(shù) 
 //tab.rows[x].deleteCell(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].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>

效果演示：