javascript动态创建表格及添加数据实例详解


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下:

1. 动态创建表格(代码不兼容IE6)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建表格</title>
<script type="text/javascript">
function AppendTableData() {
 var table = document.getElementById("tblMain");
 var data = { "百度": "http://www.baidu.com",
 "三水点靠木": "https://3water.com",
 "搜狐": "http://www.sohu.com"
 };
 for (var key in data) {
 var tr = document.createElement("tr");
 var td1 = document.createElement("td");
 td1.innerText = key;
 //FireFox不支持innerText,只能使用innerHTML
 tr.appendChild(td1);
 var td2 = document.createElement("td");
 td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";
 tr.appendChild(td2);
 table.appendChild(tr);
 }
}
</script>
</head>
<body>
 <table id="tblMain"></table>
 <input type="button" value="动态添加网格数据" 
 onclick="AppendTableData()" />
</body>
</html>

2. 动态创建表格(兼容IE6、IE7)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>添加网格数据(处理了IE兼容问题)</title>
 <script type="text/javascript">
 function AppendData() {
  var data = {"三水点靠木":"https://3water.com",
   "百度":"http://www.baidu.com",
   "搜狐": "http://www.sohu.com"};
  var table = document.getElementById("tblMain");
  for (var key in data) {  
  var value = data[key];
  var tr = table.insertRow(-1);
  //FireFox必须使用-1这个参数
  var td1 = tr.insertCell(-1);
  td1.innerText = key;
  var td2 = tr.insertCell(-1);
  td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
  }
 }
 </script>
</head>
<body>
 <table border="1" id="tblMain"></table>
 <input type="button" value="添加网格数据(处理了IE兼容问题)"
 onclick="AppendData()" />
</body>
</html>

3. 动态创建表格(兼容IE6、IE7)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>动态创建表格(处理IE6兼容问题)</title>
 <script type="text/javascript">
 function AppendTableData() {
  var table = document.getElementById("tblMain");
  var data = { "百度": "http://www.baidu.com",
  "三水点靠木": "https://3water.com",
  "搜狐": "http://www.sohu.com"
  };
  for (var key in data) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerText = key;
  tr.appendChild(td1);
  var td2 = document.createElement("td");
  td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";
  tr.appendChild(td2);
  //table.appendChild(tr); 把这一句替换掉
  table.tBodies[0].appendChild(tr);
  }
 }
 </script>
</head>
<body>
 <!--由于动态添加的数据在debugbar中看生成的HTML代码发现,
 会自动添加一个<tbody>
 并且内容是空的,把我们动态生成的数据给冲掉了,
 所以我们手工添加一个<tbody>
 tr添加到这个<tbody>下面
 -->
 <table id="tblMain"><tbody></tbody></table>
 <input type="button" value="动态添加网格数据"
 onclick="AppendTableData()" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js实现动态改变字体大小代码
Jan 02 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
如何优化vue打包文件过大
Apr 13 Vue.js
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
You might like
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
JS的数组的扩展实例代码
2008/07/09 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python实现视频下载功能
2017/03/14 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
2014年稽查工作总结
2014/12/20 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server