javascript

javascript dynamically creates tables and adds data instance details

This article illustrates javascript’s approach to dynamically creating tables and adding data. Share to everybody for everybody reference. The specific analysis is as follows:

1. Dynamic table creation (code incompatible with IE6)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Dynamically creating tables </title>
<script type="text/javascript">
function AppendTableData() {
 var table = document.getElementById("tblMain");
 var data = { " baidu ": "http://www.baidu.com",
 " The home of the script ": "https://www.ofstack.com",
 " sohu ": "http://www.sohu.com"
 };
 for (var key in data) {
 var tr = document.createElement("tr");
 var td1 = document.createElement("td");
 td1.innerText = key;
 //FireFox Does not support innerText, Can only use 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=" Add grid data dynamically "
 onclick="AppendTableData()" />
</body>
</html>

2. Dynamic table creation (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> Add grid data ( Deal with the IE compatibility )</title>
 <script type="text/javascript">
 function AppendData() {
  var data = {" The home of the script ":"https://www.ofstack.com",
   " baidu ":"http://www.baidu.com",
   " sohu ": "http://www.sohu.com"};
  var table = document.getElementById("tblMain");
  for (var key in data) {
  var value = data[key];
  var tr = table.insertRow(-1);
  //FireFox You must use the -1 This parameter
  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=" Add grid data ( Deal with the IE compatibility )"
 onclick="AppendData()" />
</body>
</html>

3. Dynamic table creation (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> Dynamically creating tables ( To deal with IE6 compatibility )</title>
 <script type="text/javascript">
 function AppendTableData() {
  var table = document.getElementById("tblMain");
  var data = { " baidu ": "http://www.baidu.com",
  " The home of the script ": "https://www.ofstack.com",
  " sohu ": "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);  the 1 Other replace
  table.tBodies[0].appendChild(tr);
  }
 }
 </script>
</head>
<body>
 <!-- Due to the dynamic addition of data in debugbar Visually generated HTML Code discovery,
  Will automatically add 1 a <tbody>
  And the content is empty, flushing out the data that we're generating dynamically,
  So we add it manually 1 a <tbody>
 tr Add to this <tbody> The following
 -->
 <table id="tblMain"><tbody></tbody></table>
 <input type="button" value=" Add grid data dynamically "
 onclick="AppendTableData()" />
</body>
</html>

I hope this article has been helpful for your javascript programming.