<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; border: 1px solid pink; } </style> </head> <body> <input type="button" value="創建表格" id="bt"/> <div id="dv"></div> <script src="common.js"></script> <script> var arr = [ {name: "百度", href: "http://www.baidu.com"}, {name: "京東", href: "http://www.jd.com"}, {name: "淘寶", href: "http://www.taobao.com"}, {name: "優酷", href: "http://www.youku.com"}, {name: "愛奇藝", href: "http://www.aiqiyi.com"} ]; my$("bt").onclick = function () { //創建table加入到div中 var tableObj = document.createElement("table"); tableObj.border = "1"; tableObj.cellPadding = "0"; tableObj.cellSpacing = "0"; my$("dv").appendChild(tableObj); //創建行,把行添加到table中 for (var i = 0; i < arr.length; i++) { //每個對象 var td = arr[i]; var trObj = document.createElement("tr"); tableObj.appendChild(trObj); //創建第一個列,然后加入到行中 var td1 = document.createElement("td"); td1.innerText = arr[i].name; trObj.appendChild(td1); //創建第二個列,然后加入到行中 var td2 = document.createElement("td"); td2.innerHTML = "<a href=" + arr[i].href + ">" + arr[i].name + "</a>" trObj.appendChild(td2); } }; </script> </body> </html>