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对象
//获取标签的兄弟节点
// 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

完整的代码：

 
 
  
  
  
 table{ 
  border:#00ffff solid 2px; 
  border-collapse:collapse; 
 } 
 td{ 
  border:#8080ff solid 2px; 
  padding:10px; 
 } 
  
  
  
 
  
 行: 
 列: 
 
 
 
  
 
 
 
  
 
 
  
  
 

效果演示：




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



转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/99906.html


   上一篇  js全选按钮的实现方法
 
   下一篇  jQuery EasyUI 布局之动态添加tabs标签页
  






JavaScript相关栏目本月热门文章

  
1【Linux驱动开发】设备树详解（二）设备树语法详解
  
2别跟客户扯细节
  
3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  
4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  
5【分页】常见两种SpringBoot项目中分页技巧
  
6一文带你搞懂OAuth2.0
  
7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  
8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  
9JavaSE - 封装、static成员和内部类
  
10树莓派mjpg-streamer实现监控及拍照功能调试
  
11用c++写一个蓝屏代码
  
12从JDK8源码中看ArrayList和LinkedList的区别
  
13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  
14在openwrt使用C语言增加ubus接口（包含C uci操作）
  
15Spring 解决循环依赖
  
16SpringMVC——基于MVC架构的Spring框架
  
17Andy‘s First Dictionary C++ STL set应用
  
18动态内存管理
  
19我的创作纪念日
  
20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号