1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>动态创建表格</title>
6 <script src="jquery-1.11.1.js"></script>
7 <style>
8 table {
9 border-collapse: collapse;
10 border-spacing: 0;/*单元格和表格边框合并*/
11 border: 1px solid #c0c0c0;
12 }
13
14 th,
15 td {
16 border: 1px solid #d0d0d0;
17 color: #404060;
18 padding: 10px;
19 }
20
21 th {
22 background-color: #09c;
23 font: bold 16px "微软雅黑";
24 color: #fff;
25 }
26
27 td {
28 font: 14px "微软雅黑";
29 }
30
31 tbody tr {
32 background-color: #f0f0f0;
33 }
34
35 tbody tr:hover {
36 cursor: pointer;
37 background-color: #fafafa;
38 }
39 </style>
40 <script>
41 var data=[{
42 name:"传智播客",
43 url:"www.baidu.com",
44 type:"百度搜索引擎"
45 },{
46 name:"黑马程序员",
47 url:"www.baidu.com",
48 type:"百度搜索引擎"
49 },{
50 name:"传智前端学院",
51 url:"www.baidu.com",
52 type:"百度搜索引擎"
53 }];
54 $(function(){
55 //第一种方法
56 /* var str="";
57 //将数组动态创建到tbody中去
58 for( var i=0;i<data.length;i++){
59 var temp=data[i];
60 str+="<tr>";
61 str+= "<td>" + temp.name + "</td>";
62 str+= "<td>" + temp.url + "</td>";
63 str+= "<td>" + temp.type + "</td>";
64 str+="</tr>";
65
66 }
67 //把拼接好的html放到tbody中去
68 $("#tb").html(str);*/
69
70 //第二种方法
71 $("#tb").empty();//清空所有子节点
72 for(var i=0;i<data.length;i++){
73 var temp=$("<tr></tr>");//动态创建tr标签
74 temp.append("<td>"+data[i].name+"</td>");//给每行添加单元格
75 temp.append("<td>"+data[i].url+"</td>");
76 temp.append("<td>"+data[i].type+"</td>");
77 $("#tb").append(temp);
78 }
79 })
80 </script>
81
82 </head>
83 <body>
84 <table>
85 <thead id="th">
86 <tr>
87 <th>标题</th>
88 <th>地址</th>
89 <th>说明</th>
90 </tr>
91 </thead>
92 <tbody id="tb"></tbody>
93 </table>
94 </body>
95 </html>
运行效果：
