用javascript制作表格
高洛峰
高洛峰 2017-04-10 12:43:57
0
1
375

var people = {
"programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
] }
<html>
<head>
<!--创建一个表格 width表格的大小 border表格边框厚度 cellspacing 是表格内边框直接的距离 cellpadding 每个表格的高度-->
<table width="200" border="1" cellspacing="0" cellpadding="0" id="table1">
</table>
<!--插入脚本-->
<script language="javascript">
<!--定义表格里面的值-->
var value1 = "link";
<!--创建5行 创建3格 新建一个tbody类型的Element节点 tbody表格的身体-->
var row = 5;
var col = 3;
var tbody = document.createElement("tbody");
<!--新建一个tr类型的Element节点 新建一个td类型的Element节点-->
for(var i=0;i<row;i++)
{
var tr = document.createElement("tr");
for(var j=0;j<col;j++)
{
var td = document.createElement("td");
<!--获得表格的值 将节点td加入tr中-->
td.innerHTML = value1;
tr.appendChild(td);
}
<!--将节点tr加入tbody中-->
tbody.appendChild(tr);
}
<!--定位到table上 节点tbody加入节点尾部-->
var parNode = document.getElementById("table1");
parNode.appendChild(tbody);
</script>
</head>
<body>
</body>
</html>
我现在已经可以做一个大概的表格了 但是我不知道怎么把我上面的内容加到我的表格里面去!

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(1)
阿神

用datatables这种jQuery的插件吧。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!