JavaScript如何动态创建table表格

2021-10-09 06:32:15分类：前端开发 / JavaScript 教程阅读(4997)评论(0)

这篇文章主要介绍了JavaScript如何动态创建table表格，一些时候需要动态的创建和删除表格，接下来的文章中将为大家介绍下javascript是如何做到的，感兴趣的朋友不要错过

两种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对象 //获取标签的兄弟节点 // var node3=tabnode.previousSibling;//前一个节点 获取对此对象的上一个兄弟对象的引用。 // alert("previous--node3:"+node3);//#text // 如果
后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text， // 而低版本IE会直接越过-----不光是
节点，其它节点也一样 // 表格的,
标签和标签中间，其实还隐藏着一个标签----表格体 
动态的创建和删除：
 创建表格，通过输入的值：
 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
删除行：
 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
完整的代码：
   createTable2.html 行: 列:


效果演示：
以上就是为大家分享的两种JavaScript动态创建table表格的方法，希望大家喜欢。
以上就是JavaScript如何动态创建table表格的详细内容，更多请关注0133技术站其它相关文章！
赞(0) 打赏
未经允许不得转载：0133技术站首页 » JavaScript 教程
相关文章
前端开发
HTML 教程CSS 教程JavaScript 教程Vue.js 教程Node.js 教程

置顶推荐
猜你喜欢