jQuery动态创建表格
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>
运行效果：
第84天：jQuery动态创建表格
原文地址：http://www.cnblogs.com/le220/p/7835256.html