jQuery+Json实现数据动态加载

最新推荐文章于 2023-02-04 19:13:25 发布

JqueryBoand

最新推荐文章于 2023-02-04 19:13:25 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_38133660/article/details/104760399

版权

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>

</head>

<body>

<h4>我的英雄列表</h4>

<thead>

<tr>

</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、最终效果展示：

JqueryBoand

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jQuery+Json实现数据动态加载

H5+CSS+jQuery+Json实现数据动态加载需求：使用h5+css完成界面，使用Json存放数据，使用jQuery将json中的数据动态加载到页面的表格中；实现步骤：1、新建前端项目study_map，其结构如下图所示；css目录：存放css样式文件；html目录：存放html页面文件；js目录：存放jquery库文件及自定义js文件；resource...
复制链接

扫一扫