两种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表格

JavaScript如何动态创建table表格

JavaScript如何动态创建table表格

JavaScript如何动态创建table表格

以上就是为大家分享的两种JavaScript动态创建table表格的方法,希望大家喜欢。

标签:
js创建table,js创建表格,js动态创建表格

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript如何动态创建table表格”

暂无“JavaScript如何动态创建table表格”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。