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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 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
Protoss魔法科技
2020/03/14 星际争霸
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
理解javascript异步编程
2016/01/27 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
移动端界面的适配
2017/01/11 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
RC4文件加密的python实现方法
2015/06/30 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
基于Python测试程序是否有错误
2020/05/16 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
高中生学期学习自我评价
2014/02/24 职场文书
党员创先争优活动总结
2014/05/04 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
天鹅湖观后感
2015/06/09 职场文书
董事会决议范本
2015/07/01 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python