1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02-jQuery-动态创建表格案例</title> 6 <script src="jquery-1.11.3.js"></script> 7 <style> 8 * { padding: 0; margin: 0; } 9 table { 10 border-collapse: collapse; 11 border-spacing: 0; 12 border: 1px solid #c0c0c0; 13 } 14 15 th,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 tbody tr { 31 background-color: #f0f0f0; 32 } 33 tbody tr:hover { 34 cursor: pointer; 35 background-color: #fafafa; 36 } 37 </style> 38 <script> 39 var data = [{ 40 name: "传智播客", 41 url: "http://www.itcast.cn", 42 type: "IT最强培训机构" 43 },{ 44 name: "黑马程序员", 45 url: "http://www.itheima.com", 46 type: "大学生IT培训机构" 47 },{ 48 name: "传智前端学院", 49 url: "http://web.itcast.cn", 50 type: "前端的黄埔军校" 51 }]; 52 53 $(function(){ 54 //第一种：动态创建表格的方式，使用拼接html的方式 （推荐） 55 // var html = ""; 56 // for( var i = 0; i < data.length; i++ ) { 57 // html += "<tr>"; 58 // html += "<td>" + data[i].name + "</td>" 59 // html += "<td>" + data[i].url + "</td>" 60 // html += "<td>" + data[i].type + "</td>" 61 // html += "</tr>"; 62 // } 63 // $("#J_TbData").html(html); 64 65 //第二种： 动态创建表格的方式，使用动态创建dom对象的方式 66 //清空所有的子节点 67 $("#J_TbData").empty(); 68 69 //自杀 70 // $("#J_TbData").remove(); 71 72 for( var i = 0; i < data.length; i++ ) { 73 //动态创建一个tr行标签,并且转换成jQuery对象 74 var $trTemp = $("<tr></tr>"); 75 76 //往行里面追加 td单元格 77 $trTemp.append("<td>"+ data[i].name +"</td>"); 78 $trTemp.append("<td>"+ data[i].url +"</td>"); 79 $trTemp.append("<td>"+ data[i].type +"</td>"); 80 // $("#J_TbData").append($trTemp); 81 $trTemp.appendTo("#J_TbData"); 82 } 83 }); 84 </script> 85 </head> 86 <body> 87 <table> 88 <thead> 89 <tr> 90 <th>标题</th> 91 <th>地址</th> 92 <th>说明</th> 93 </tr> 94 </thead> 95 <tbody id="J_TbData"> 96 </tbody> 97 </table> 98 99 <br> 100 <!-- 整个表格：ｔａｂｌｅ --> 101 <table> 102 <thead> 103 <tr> <!-- tr：table row：表格的行 --> 104 <th>一个格</th> 105 <th>一个格</th> 106 <th>一个格</th> 107 </tr> 108 </thead> 109 <tbody> 110 <tr> 111 <!-- rowspan:跨度两个行 --> 112 <td rowspan="2">一个格</td> 113 114 <!-- clospan：跨度两个列 --> 115 <td colspan="2">一个格</td> 116 <!-- <td>一个格</td> --> 117 </tr> 118 119 <tr> 120 <!-- <td>sd</td> --> 121 <td>ss</td> 122 <td>ss</td> 123 </tr> 124 </tbody> 125 126 </table> 127 </body> 128 </html>