第84天：jQuery动态创建表格
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第84天：jQuery动态创建表格相关的知识，希望对你有一定的参考价值。
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动态创建表格的主要内容，如果未能解决你的问题，请参考以下文章
jQuery ajax 动态append创建表格出现不兼容ie8