jQuery動態生成table
阿新 • • 發佈：2020-07-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-jQuery-動態建立表格案例</title> <script src="jquery-1.11.3.js"></script> <style> * { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <script> var data = [{ name:"傳智播客", url: "http://www.itcast.cn", type: "IT最強培訓機構" },{ name: "黑馬程式設計師", url: "http://www.itheima.com", type: "大學生IT培訓機構" },{ name: "傳智前端學院", url: "http://web.itcast.cn", type: "前端的黃埔軍校" }]; $(function(){ //第一種：動態建立表格的方式，使用拼接html的方式 （推薦） // var html = ""; // for( var i = 0; i < data.length; i++ ) { // html += "<tr>"; // html += "<td>" + data[i].name + "</td>" // html += "<td>" + data[i].url + "</td>" // html += "<td>" + data[i].type + "</td>" // html += "</tr>"; // } // $("#J_TbData").html(html); //第二種： 動態建立表格的方式，使用動態建立dom物件的方式 //清空所有的子節點 $("#J_TbData").empty(); //自殺 // $("#J_TbData").remove(); for( var i = 0; i < data.length; i++ ) { //動態建立一個tr行標籤,並且轉換成jQuery物件 var $trTemp = $("<tr></tr>"); //往行裡面追加 td單元格 $trTemp.append("<td>"+ data[i].name +"</td>"); $trTemp.append("<td>"+ data[i].url +"</td>"); $trTemp.append("<td>"+ data[i].type +"</td>"); // $("#J_TbData").append($trTemp); $trTemp.appendTo("#J_TbData"); } }); </script> </head> <body> <table> <thead> <tr> <th>標題</th> <th>地址</th> <th>說明</th> </tr> </thead> <tbody id="J_TbData"> </tbody> </table> <br> <!-- 整個表格：ｔａｂｌｅ --> <table> <thead> <tr> <!-- tr：table row：表格的行 --> <th>一個格</th> <th>一個格</th> <th>一個格</th> </tr> </thead> <tbody> <tr> <!-- rowspan:跨度兩個行 --> <td rowspan="2">一個格</td> <!-- clospan：跨度兩個列 --> <td colspan="2">一個格</td> <!-- <td>一個格</td> --> </tr> <tr> <!-- <td>sd</td> --> <td>ss</td> <td>ss</td> </tr> </tbody> </table> </body> </html>