JavaScript如何动态创建table表格


Posted in Javascript onAugust 02, 2020

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

Javascript 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
使用AOP改善javascript代码
May 01 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 #Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
JavaScript严格模式详解
Nov 18 #Javascript
每天一篇javascript学习小结(String对象)
Nov 18 #Javascript
跟我学习javascript的执行上下文
Nov 18 #Javascript
跟我学习JScript的Bug与内存管理
Nov 18 #Javascript
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
如何打开php的gd2库
2017/02/09 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python采集微信公众号文章
2018/12/20 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
学校对教师的评语
2014/04/28 职场文书
人事文员岗位职责
2015/02/04 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis