js访问jsion数据动态显示在html页面

最新推荐文章于 2024-07-14 14:35:12 发布
最新推荐文章于 2024-07-14 14:35:12 发布
阅读量552 收藏
点赞数
文章标签： 数据结构与算法 javascript ViewUI
原文链接：http://www.cnblogs.com/wangyuxue/p/11202197.html
版权

一、jsion数据文件：fileList.js

 

var fileList = [{

name: 'aa',

size: '1.3M',

createTime: '2019-07-16 11:33',

url: './aa.doc',

remarks: '图片类型文件',

},{

name: 'bb',

size: '32.3M',

createTime: '2019-07-16 11:34',

url: './bb.doc',

remarks: 'Word类型文件',

},

{

name: 'cc',

size: '2.3K',

createTime: '2019-07-16 15:34',

url: './cc.doc',

remarks: 'Excel类型文件',

}];

 

 

二、html文件：index.html

 

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title>文件管理</title>

<link href="./home.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="app">

<h2>文件管理</h2>

<div>

<div class="file-title">

<span class="name-title">文件名</span>

<span class="size-title">大小</span>

<span class="createTime-title">日期</span>

<span class="remarks-title">备注</span>

</div>

<div class="file-content">

</div>

</div>

</div>

</body>

</html>

<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>

<script type="text/javascript" src="./fileList.js"></script>

<script>

var strHtml = "\r\n";

for(var i = 0;i < fileList.length; i++){

strHtml += "<div class='contentList'>";

strHtml += "<img src='./images/fileLogos.jpg'>";

strHtml += "<span class='name'><a href="+ fileList[i].url +">"+ fileList[i].name + "</a></span>";

strHtml += "<span class='size'>"+ fileList[i].size + "</span>";

strHtml += "<span class='createTime'>" + fileList[i].createTime + "</span>";

strHtml += "<span class='remarks'>" + fileList[i].remarks + "</span></div>";

}

$(".file-content").append(strHtml);

</script>

 

 

三、css文件：home.css

 

#app{

width: 1200px;

margin: 0 auto;

}

.file-title{

border: 1px solid #dcdee2;

width: 1200px;

height: 60px;

line-height: 60px;

border-bottom: none;

}

.name-title{

/* border: 1px solid blue; */

display: inline-block;

width: 180px;

font-size: 18px;

font-weight: 600;

color: #17233d;

padding-left: 10px;

}

.size-title{

/* border: 1px solid blue; */

display: inline-block;

width: 180px;

font-size: 18px;

font-weight: 600;

color: #17233d;

padding-left: 10px;

}

.createTime-title{

/* border: 1px solid blue; */

display: inline-block;

width: 250px;

font-size: 18px;

font-weight: 600;

color: #17233d;

padding-left: 10px;

}

.remarks-title{

/* border: 1px solid blue; */

display: inline-block;

width: 250px;

font-size: 18px;

font-weight: 600;

color: #17233d;

padding-left: 10px;

}

.file-content{

border: 1px solid #dcdee2;

width: 1200px;

border-bottom: none;

}

/* .file-content span{

width: 220px;

} */

.name{

/* border: 1px solid darkmagenta; */

display: inline-block;

width: 155px;

color: #515a6e;

}

.size{

/* border: 1px solid darkblue; */

display: inline-block;

width: 150px;

color: #515a6e;

}

span.createTime{

/* border: 1px solid forestgreen; */

display: inline-block;

width: 290px;

color: #515a6e;

}

.remarks{

/* border: 1px solid forestgreen; */

display: inline-block;

width: 170px;

color: #515a6e;

}

a{

text-decoration: none;

font-size: 18px;

}

.line{

border: 0.5px solid #dcdee2;

width: 1200px;

margin-top: 10px;

}

img{

width: 40px;

height: 40px;

margin-left: 10px;

margin-right: 10px;

display: inline-block;

line-height: 30px;

/* border: 1px solid red; */

}

.contentList{

/* border: 1px solid red; */

line-height: 50px;

border-bottom: 1px solid #dcdee2;

display: flex;

align-items: center;

}

转载于:https://www.cnblogs.com/wangyuxue/p/11202197.html

aoyueli3211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html显示数组内容,在html表中显示js数组
weixin_30067913的博客
06-08 2977
I have a javascript array and I want to show parts of it in HTML.我有一个javascript数组，我想用HTML显示它的一部分。For example what html code would I use in the body to show a table of just the info from QR4 - the numb...
js 数据类型转换总结笔记
03-23
由于JavaScript是一种动态类型语言，变量的数据类型在运行时可以改变，这给编程带来了灵活性，但也可能导致一些意外的错误。本篇文章将深入探讨JavaScript中的主要数据类型转换及其应用。 1. 基本数据类型 ...
html+js的数据展示页面
weixin_45555153的博客
07-17 549
【代码】html+js的数据展示页面。
html 页面调用js链接并显示数据
weixin_34292924的博客
11-02 1360
html 页面调用js链接并显示数据 一、测试页面1 <!doctype html> <html> <div id='dv'></div> <script src="http://qt.gtimg.cn/q=sz399001" charset="gb2312"> </script&g...
JSON详解
最新发布
敲厉害的燕宝的博客
07-14 3564
JSON 和 XML 各有优势，选择哪种格式取决于具体的应用需求。如果需要在 Web 应用中快速传输数据，JSON 是更好的选择；如果需要高度结构化的数据格式和跨语言的兼容性，XML 可能更适合。
JSON数据
m0_57150356的博客
10-26 2382
Android应用程序界面上的数据信息大部分都是通过网络请求从服务器上获取到的，获取到的数据类型常见的就是JSON。JSON是一种新的数据格式，这种格式的数据不可以直接显示到程序的界面上，需要将该数据解析为一个集合或对象的形式才可以显示到界面上。JSON的全称为，JSON表示一种轻量级的数据交互格式，它是基于JavaScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
三级联动大全_js+jsion三级联动_xml+js+jquery三级联动.rar
07-20
这个压缩包文件包含了多种实现三级联动效果的方法，包括JavaScript（js）、JSON（jsion）、XML以及jQuery的组合使用。 【描述】提到的"js三级联动"是指在网页中，通过JavaScript实现的三个下拉菜单之间的联动效果。...
使用Java进行Json数据的解析(对象数组的相互嵌套)
10-19
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端交互。在Java中，我们通常使用Jackson、Gson或org.json库来解析JSON。 首先，我们需要导入相关的库。在这个例子中，我们使用的是org....
dephi jsion解析
08-15
根据给定的标题“Delphi JSON解析”以及描述与部分代码内容，我们可以提炼出一系列关于如何在Delphi中处理JSON数据的关键知识点。 ### Delphi中的JSON解析基础 #### 1. **Delphi与JSON** - **背景介绍**：Delphi...
html 出来数据,JavaScript 显示数据
weixin_30476033的博客
06-04 735
㈠JavaScript 显示数据⑴使用window.alert()弹出警告框。⑵使用document.write()方法将内容写到 HTML 文档中。⑶使用innerHTML写入到 HTML 元素。⑷使用console.log()写入到浏览器的控制台。㈡使用 window.alert()举例示范如下：html>警告框弹出警告框来显示数据计算简单的加法运算window.aler...
把js里面的值显示到html上的办法
YZXnuaa的博客
11-08 2495
如果你使用的是现代前端框架（如 React, Vue, Angular），它们有自己的机制来更新 DOM 和显示数据。: 这个方法会向 HTML 文档写入内容，但通常不推荐使用，因为它会重写整个 HTML 页面。: 在现代浏览器中，你可以使用模板字面量来构造 HTML 字符串，然后将其插入到 DOM 中。: 这两个属性也可以用来修改元素的内容，但不会解析 HTML 标签。: 你可以创建新的 HTML 元素，并将其添加到 DOM 中。属性，可以将内容插入到指定的元素中。: 通过改变 HTML 元素的。
js数组怎么显示在html,在D3.js中显示数组值html工具提示
weixin_29010003的博客
06-27 722
我试图从D3工具提示上的我的json文件中显示一些数据。 我可以显示几乎所有的数据，我只是无法显示数组的所有对象，它只显示数组的最后一个对象。在D3.js中显示数组值html工具提示我编制了这个简单的例子，以便更容易地向你展示最新情况。 我只是在我的工具提示中列出名称和依赖关系。我的提示var myTollTip = d3.select(".container").append("div").at...
一、html文件中嵌入javaScript
weixin_43631940的博客
01-29 179
html文件中嵌入javaScript
JSON的概念
qq_49464663的博客
08-10 169
格式要求：key必须要用""括起来一般数据是从后台获取，返回给的jison格式数据是字符串，虽然对应的js可以解析jsion格式，但是后台给的是字符串的话就要进行序列化和反序列化。一、概述 一种数据格式，广泛用于数据传输（大部分数据传输都是采用JSON）优点：跨平台，跨语言。序列化：将一个内容写到另一个东西里面，核心就是将对应的对象变成jison格式的字符串。反序列化：反过来从一个东西里面获取另一个东西，将json格式的字符串变成对象。eval：造成安全问题。...
json
a2QWSDN的博客
06-07 294
JSON.parse 和JSON.stringify的作用： json.parse() JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 json.stringify() JSON 通常用于与服务端交换数据。 在向服务器发送数据时一般是字符串。 我们可以使用 JSON.string...
JSON 语法
热门推荐
11-01 4万+
JSON（详解）
JiaYu的博客
10-27 5712
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它以易于阅读和编写的文本格式来存储和表示数据，通常用于在不同的系统之间进行数据交换。JSON数据以键-值对的形式组织，可以包含对象、数组、字符串、数字等基本数据类型。它经常在Web开发、API通信等领域被广泛使用。
什么是JSON？
usstmiracle的博客
07-11 999
我有点懒，大家耐心看图，哈哈
jsion-server中sendStatus方法
06-01
例如，可以使用以下代码在 json-server 中发送 404 状态码： ``` app.get('/not-found', (req, res) => { res.sendStatus(404); }); ``` 这将向客户端发送一个 HTTP 404 响应，表示请求的资源未找到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值