09JavaScript DOM动态创建表格第一种方法(I6不兼容) 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title></title>
 5     <script type="text/javascript">
 6         var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
 7 
 8         onload = function () {
 9             document.getElementById('btn').onclick = function () {
10                 //创建表格
11                 var tb = document.createElement('table');
12                 //设置表格的边框，不用加px，因为他是HTML的属性
13                 tb.border = '1';
14                 for (var item in dic) {
15                     //创建行
16                     var trObj = document.createElement('tr');
17                     //将行加到表格中
18                     tb.appendChild(trObj);
19 
20                     //创建单元格
21                     var tdObj1 = document.createElement('td');
22                     //键值对中的内容填入表格
23                     
24                     if (typeof (tdObj1.innerText) == 'string') {//判断兼容性
25                         //IE
26                         tdObj1.innerText = item;
27                     } else {
28                         //火狐
29                         tdObj1.textContent = item;
30                     };
31                     var tdObj2 = document.createElement('td');
32                     tdObj2.innerHTML = '<a href="' + dic[item] + '" target="_blank">' + dic[item] + '</a>';
33                     trObj.appendChild(tdObj1);
34                     trObj.appendChild(tdObj2);
35                 };
36                 //将表格添加到body标签中
37                 document.body.appendChild(tb);
38             };
39         };
40     </script>
41 </head>
42 <body>
43     <input id="btn" type="button" name="name" value="创建一个表格么么哒 " />
44     
45 </body>
46 </html>

 

posted on 2016-01-07 17:39  努力的活着_在人间  阅读(137)  评论(0)    收藏  举报

导航