js 动态生成表格

运用JS动态生成表格，闲话不多说直接上代码

  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>

 

posted @ 2017-08-18 16:44  FelixWang  阅读(399)  评论(0)  编辑  收藏  举报