Of Stack

javascript dynamically creates tables and adds data instance details

  • 2020-06-15 07:35:47
  • OfStack

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.

Related articles: