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>
09JavaScript DOM动态创建表格第一种方法(I6不兼容)
原文：http://www.cnblogs.com/clcloveHuahua/p/5110662.html