H5+CSS+jQuery+Json實現數據動態加載
需求：使用h5+css完成界面，使用Json存放數據，使用jQuery將json中的數據動態加載到頁面的表格中；
實現步驟：
1、新建前端項目study_map，其結構如下圖所示；
css目錄：存放css樣式文件；
html目錄：存放html頁面文件；
js目錄：存放jquery庫文件及自定義js文件；
resource目錄：存放json資源文件；
2、編寫html頁面
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入css文件 --> <link rel="stylesheet" type="text/css" href="../css/sdy_style.css"></link> <!--導入jquery庫文件--> <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script> <!--導入自定義js文件--> <script type="text/javascript" src="../js/sdy.js"></script> <title>自我超越</title> </head> <body> <h4>我的英雄列表</h4> <div class="content"> <table class="content_table"> <thead> <tr> <th width="10%">英雄編號</th> <th width="10%">英雄名稱</th> <th width="10%">英雄價格</th> <th width="10%">英雄數量</th> <th width="20%">賽場</th> <th width="20%">開發基地</th> </tr> </thead>
<tbody>
</tbody> </table> </div> </body> </html> |
3、編寫css文件
|
*{ margin-top: 0; padding: 0; font-family: arial; text-align: center; } h4{ color: #f40; line-height: 35px; font-size: 14px; } .content{ width: 60%; height: 480px; margin-left: 268px; margin-top: 25px; box-sizing: border-box; border: #ccc solid 1px; background-color: rgba(0,0,0,0.3); }
.content .content_table{ text-align: center; margin-top: 38px; margin-left:70px; box-sizing: border-box; border: #CCCCCC solid 1px;
}
.content_table thead tr th{ font-size: 15px; font-weight:100; height: 35px; text-align: center; color: rgba(0,0,0,0.5); background-color: cornflowerblue; }
.content_table tbody tr { color: black; height: 30px; font-size: 14px; font-family: simsun; font-weight: 100; }
.content_table tbody tr td{ font-size: 15px; font-family: simsun; font-weight: 100; } |
4、編寫json文件
|
[ { "pno":518001, "pname":"安琪拉", "price":128.9, "number":2, "adress":"中國北京", "company":"數據研發中心" },
{ "pno":518002, "pname":"狂鐵", "price":95.8, "number":5, "adress":"中國上海", "company":"前端開發研究發佈協會" },
{ "pno":518003, "pname":"魯班7號", "price":8128.88, "number":5, "adress":"中國廣州", "company":"魯班大師製造所" },
{ "pno":618001, "pname":"羋月", "price":12663.8, "number":3, "adress":"王者峽谷", "company":"羋月大招研究所" },
{ "pno":818008, "pname":"莊周", "price":5723, "number":5, "adress":"kpl聯賽現場", "company":"莊周輔助基地" },
{ "pno":818001, "pname":"孫臏", "price":5723, "number":1, "adress":"kpl聯賽現場", "company":"孫臏輔助基地" },
{ "pno":818002, "pname":"典韋", "price":5723, "number":681, "adress":"kpl聯賽現場", "company":"典韋戰士基地" }, { "pno":818004, "pname":"不知火舞", "price":5723, "number":8, "adress":"kpl聯賽現場", "company":"法師基地" }, { "pno":818009, "pname":"貂蟬", "price":5723, "number":10, "adress":"kpl聯賽現場", "company":"法師輔助基地" }, { "pno":218008, "pname":"狄仁傑", "price":5723, "number":8, "adress":"kpl聯賽現場", "company":"射手輔助基地" }, { "pno":318008, "pname":"豬八戒", "price":5723, "number":3, "adress":"kpl聯賽現場", "company":"二師兄產仔基地" } ] |
5、編寫js文件
|
$(function(){ getData(); //定義數據獲取函數 function getData(){
//使用ajax $.ajax({ url:"../resource/produce.json", dataType:"json", success:function(data){ //遍歷獲取到的數據，動態創建表格每一行數據 $.each(data,function(index,ele){ var $item = createRow(index,ele); var $data_item = $(".content_table tbody"); $data_item.append($item); //這兩行代碼是實現表格奇偶行顯示不同顏色的，一定要放在這個位置，因爲數據沒添加一行，就要執行一次該代碼，若放在開頭或結尾，由於js加載順序問題，使這兩行代碼在表格加載前或加載後在執行，就起不到改變奇偶行顯示不同顏色的作用 $(".content_table tbody tr:even").css("background-color","aliceblue"); $(".content_table tbody tr:odd").css("background-color","blanchedalmond"); }); console.log(data); }, error:function(e){ console.log(e); } });
} //定義動態創建數據行的方法 function createRow(index,ele){ var $items = $( "<tr>" + "<td>"+ele.pno+"</td>" + "<td>"+ele.pname+"</td>" + "<td>"+ele.price+"</td>" + "<td>"+ele.number+"</td>" + "<td>"+ele.adress+"</td>" + "<td>"+ele.company+"</td>" + "</tr>" ); return $items; } });
|
6、最終效果展示：
