<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">点击</button> <div id="box"></div> <script src="common.js"></script> <script> var arr = [ { names: "百度", href:"http://www.baidu.com", content: "哈哈"}, { names: "淘宝", href:"http://www.taobao.com", content: "哈哈"}, { names: "新浪", href:"http://www.sina.com", content: "哈哈"}, { names: "京东", href:"http://www.jd.com", content: "哈哈"}, { names: "京东", href:"http://www.jd.com", content: "哈哈"} ] // console.log(arr[3].href); //创建表格 四行两列 my$("btn").onclick = function () { //判断如果有表格了,则终止后面的操作 if(my$("table")){ return false;// 终止后面的操作, 返回错误的结果 } //1.创建table添加到div中 var tableObj = document.createElement("table"); tableObj.id = "table"; tableObj.border = "1"; tableObj.cellSpacing = "0"; my$("box").appendChild(tableObj); //2.创建行并添加到table中 for(var i = 0 ; i < arr.length ; i++){ //每一个对象 var arrList = arr[i]; var trObj = document.createElement("tr"); tableObj.appendChild(trObj); for(var key in arrList){ var tdObj = document.createElement("td"); //{ names: "百度", href:"http://www.baidu.com"}, tdObj.innerHTML = arrList[key]; trObj.appendChild(tdObj); } } } </script> </body> </html>
原文:https://www.cnblogs.com/Ironman725/p/10993350.html