Detailed explanation of javascript dynamically creating tables and adding data instances

Detailed explanation of javascript dynamically creating tables and adding data instances_javascript skills

WBOY

Release： 2016-05-16 15:59:20

Original

1522 people have browsed it

The example in this article describes how to dynamically create tables and add data using javascript. Share it with everyone for your reference. The specific analysis is as follows:

1. Dynamically create tables (code is not compatible with 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",
 "脚本之家": "http://www.jb51.net",
 "搜狐": "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>

Copy after login

2. Dynamically create tables (compatible with 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 = {"脚本之家":"http://www.jb51.net",
   "百度":"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>

Copy after login

3. Dynamically create tables (compatible with IE6 and 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",
  "脚本之家": "http://www.jb51.net",
  "搜狐": "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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.