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

前端技术 2023/09/09 JavaScript

本文实例讲述了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\",
 \"phpstudy\": \"http://www.phpstudy.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>

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 = {\"phpstudy\":\"http://www.phpstudy.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>

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\",
  \"phpstudy\": \"http://www.phpstudy.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>

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

本文地址：https://www.stayed.cn/item/23460

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案