版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34343637/article/details/82194988
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建表格</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#dv {
width: 500px;
margin: 200px auto;
background-color: #ccc;
text-align: center;
}
img {
width: 20px;
height: 21px;
vertical-align: bottom;
}
a {
text-decoration: none;
}
td {
text-align: left;
}
</style>
</head>
<body>
<div id="dv">
<input type="button" value="动态生成表格" id="btn" name="">
</div>
<script type="text/javascript">
var webSite = [
{ name: "百度", href: "http://www.baidu.com" },
{ name: "优酷", href: "http://www.youku.com" },
{ name: "爱奇艺", href: "http://www.aqiyi.com" },
{ name: "新浪", href: "http://www.sina.com" },
{ name: "腾讯", href: "http://www.tcent.com" },
];
var btnObj = document.getElementById("btn");
btnObj.onclick = function() {
var parent = document.getElementById("dv");
//判断最后的标签是不是table标签，如果不是则创建table，如果是则不创建。防止多次创建table
if (!(parent.lastElementChild.nodeType == 1 && parent.lastElementChild.nodeName == "TABLE")) {
var addElemt = document.createElement("table");
addElemt.border = "1";
parent.appendChild(addElemt);
for (var i = 0; i < webSite.length; i++) {
var tr = document.createElement("tr");
addElemt.appendChild(tr);
var td1 = document.createElement("td");
td1.innerHTML = "<img src='images/baidu.ico' >" + webSite[i].name;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href=" + webSite[i].href + ">" + webSite[i].name + "</a>";
tr.appendChild(td2);
}
}
};
</script>
</body>
</html>