当前位置： 首页 > news >正文

【JavaScript】读取本地json文件并绘制表格

news 2026/3/30 7:38:21

本文为避免跨域问题，使用了改造过的本地json文件的方法实现读取json数据并绘制表格。

如果发起http请求获取本地 json文件中数据，需要架设本地服务器，本文不做阐述。

概述

1、json在本地，并不需要从服务器下载。

2、采用jquery的each方法和for循环实现遍历。

解决方法

1、Json文件

为避免跨域问题，适当对json文件进行改造：增加了“var jsonData = ”字段。

var jsonData = {"total": 3,"rows": [{"Name": "张三","Sex": "男","CardId": "112233",},{"Name": "李四","Sex": "女","CardId": "111111"},{"Name": "王五","Sex": "男","CardId": "222222"}]
}

2、例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json文件数据渲染</title><script src="plugins/jquery3.3.1.min.js"></script><script type="text/javascript" src="plugins/data.json"></script><style>.divcss5 {width: 400px}.divcss5 table {border-color: #000000;line-height: 30px;text-align: center;}.divcss5 table thead {color: #000000;background-color: #00FFFF;font-size: 20px;font-weight: 900;}.divcss5 table tbody {color: #FF0000;background: #C0FFFF;font-size: 20px;font-weight: 200;}</style></head><body><div class="divcss5"><table width="95%" border="1" cellspacing="1" cellpadding="0"><thead><tr><td>姓名</td><td>性别</td><td>身份证</td></tr></thead><tbody id="jsonTip"></tbody></table></div><script>// 页面加载完后立刻调用getDate方法$(function () {console.log("json文件数据", jsonData);getShow(jsonData);})function getShow(data) {var $jsontip = $("#jsonTip");// 定义一个变量存储要显示的数据var s = "";// 清空数据$jsontip.empty();// 遍历拿到的数据（此处采用each方法，也可以采用for循环）$.each(data.rows, function (index, info) {s = "<tr><td>" + info.Name + "</td><td>" + info.Sex + "</td><td>" +info.CardId + "</td><tr>";// 将要展示的数据追加到页面$jsontip.append(s);})}</script></body>

效果：

关注博主：https://blog.csdn.net/sunriver2000 

相关文章：

【JavaScript】读取本地json文件并绘制表格

本文为避免跨域问题&#xff0c;使用了改造过的本地json文件的方法实现读取json数据并绘制表格。 如果发起http请求获取本地 json文件中数据&#xff0c;需要架设本地服务器&#xff0c;本文不做阐述。 概述 1、json在本地&#xff0c;并不需要从服务器下载。 2、采用jquery…...

编程日记 2023/10/5 18:52:40

前端笔试题总结，带答案和解析（一）

1. 执行以下程序&#xff0c;输出结果为&#xff08;&#xff09; var x 10; var y 20; var z x < y ? x:y; console.log(xx;yy;zz);A x11;y21;z11 B x11;y20;z10 C x11;y21;z10 D x11;y20;z11 初始化x的值为10&#xff0c;y的值为20&#xff0c;x < y返回结果为tru…...

编程日记 2023/10/5 18:51:37

LeetCode 202 快乐数

今天再次做到需要int转化成String&#xff0c;从而方便运算的题目。&#xff08;当然还可以直接使用int运算也是没问题的&#xff09; 再次出现了我容易弄混淆的问题&#xff0c;Integer.valueOf和ASCII码转化的差异&#xff1f; 其实之前我以及有记录过该问题&#xff0c;详…...

编程日记 2023/10/5 18:50:36

国庆作业day6

服务器 #include <my_head.h> #define IP "192.168.101.66" #define PORT 6666 int main(int argc, const char *argv[]) {//创建套接字int fd socket(AF_INET, SOCK_STREAM, 0);if(fd < 0){ERR_MSG("socket");return -1;}struct sockaddr_in s…...

编程日记 2023/10/5 18:49:36

李沐深度学习记录4：12.权重衰减/L2正则化

权重衰减从零开始实现 #高维线性回归 %matplotlib inline import torch from torch import nn from d2l import torch as d2l#整个流程是&#xff0c;1.生成标准数据集&#xff0c;包括训练数据和测试数据 # 2.定义线性模型训练 # 模型初始化&#xff08;函…...

编程日记 2023/10/5 18:48:35

堆--数组中第K大元素

如果对于堆不是太认识&#xff0c;请点击&#xff1a;堆的初步认识-CSDN博客 解题思路&#xff1a; /*** <h3>求数组中第 K 大的元素</h3>* <p>* 解体思路* <ol>* 1.向小顶堆放入前k个元素* 2.剩余元素* 若 < 堆顶元素, 则略过* …...

编程日记 2023/10/5 18:47:34

ipad使用技巧

1、goodnotes中批量导入pdf文件 法一&#xff1a; 直接参考视频&#xff1a; 【目前为止所知iPad上goodnotes批量导入网盘文件最快的方法】 大致步骤&#xff1a;pdf文件传到百度网盘&#xff0c;然后ES软件登录百度网盘&#xff0c;在goodnotes中导入&#xff0c;选择ES&a…...

编程日记 2023/10/5 18:44:31

Windows系统上使用CLion远程开发Linux程序

CLion远程开发Linux程序 情景说明Ubuntu配置CLion配置同步 情景说明 在Windows系统上使用CLion开发Linux程序&#xff0c;安装CLion集成化开发环境时会自动安装cmake、mingw&#xff0c;代码提示功能也比较友好。 但是在socket开发时&#xff0c;包含sys/socket.h头文件时&am…...

编程日记 2023/10/5 18:43:30

github搜索技巧

指定语言 language:java 比如我要找用java写的含有blog的内容 搜索项目名称包含关键词的内容 vue in:name 其他如项目描述跟项目文档&#xff0c;如下 组合使用 vue in:name,description,readme 根据Star 或者fork的数量来查找 总结 springboot vue stars:>1000 p…...

编程日记 2023/10/5 18:40:28

Python生成器

生成器 Generators 要理解生成器&#xff0c;首先要理解迭代器&#xff0c;迭代器由以下三个部分组成&#xff1a; 可迭代对象&#xff08;iterable&#xff09;迭代器&#xff08;iterator&#xff09;迭代&#xff08;iteration&#xff09; 1. 可迭代对象 只要定义了可以…...

编程日记 2023/10/5 18:37:25

flutter开发实战-使用FutureBuilder异步数据更新Widget

flutter开发实战-使用FutureBuilder异步数据更新Widget 在开发过程中&#xff0c;经常遇到需要依赖异步数据更新Widget的情况&#xff0c;如下载图片后显示Widget&#xff0c;获取到某个数据时候&#xff0c;显示在对应的UI界面上&#xff0c;都可以使用FutureBuilder异步数据…...

编程日记 2023/10/5 18:35:24

1.2 数据模型

思维导图&#xff1a; 前言&#xff1a; **1.2.1 什么是模型** - **定义**&#xff1a;模型是对现实世界中某个对象特征的模拟和抽象。例如&#xff0c;一张地图、建筑设计沙盘或精致的航模飞机都可以视为具体的模型。 - **具体模型与现实生活**&#xff1a;具体模型可以很容…...

编程日记 2023/10/5 18:33:22

【实用工具】谷歌浏览器插件开发指南

谷歌浏览器插件开发指南涉及以下几个方面&#xff1a; 1. 开发环境准备&#xff1a;首先需要安装Chrome浏览器和开发者工具。进入Chrome应用商店&#xff0c;搜索“Extensions Reloader”和“Manifest Viewer”两个插件进行安装&#xff0c;这两个插件可以方便开发和调试。 2…...

编程日记 2023/10/5 18:32:20

应用层协议——DNS、DHCP、HTTP、FTP

目录 1、DNS 协议 1-1&#xff09;Hosts 文件 1-2&#xff09;DNS 系统 1-3&#xff09;域名的组成、分类和树状结构 1-4&#xff09;DNS 域名服务器类型 1-5&#xff09;DNS 查询方式 1-6&#xff09;DNS 域名解析的一般步骤 1-7&#xff09;对象类型与资源记录 2、D…...

编程日记 2023/10/5 18:31:19

XML文件读写

0、.pro文件添加依赖 QT xml1、使用 QDomDocument 方式 #include <QtXml/QDomDocument> #include <QtXml/QDomProcessingInstruction> #include <QtXml/QDomElement> #include <QFile> #include <QTextStream> #include <QDebug>bo…...

编程日记 2023/10/5 18:29:18

Win11 安装 Vim

安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Ru7HhTSotz9mteHug-Yhpw?pwd6666 提取码&#xff1a;6666 双击安装包&#xff0c;一直下一步。 配置环境变量&#xff1a; 先配置系统变量中的path&#xff1a; 接着配置用户变量&#xff1a; 在 cmd 中输入…...

编程日记 2023/10/5 18:27:16

Mac电脑BIM建模软件 Archicad 26 for Mac最新

ARCHICAD 软件特色 智能化 在2D CAD中&#xff0c;所有的建筑构件都由线条构成和表现&#xff0c;仅仅是一些线条的组合而已&#xff0c;当我们阅读图纸的时候是按照制图规范来读取这些信息。我们用一组线条表示平面中的窗&#xff0c;再用另一组不同的线条在立面中表示同一个…...

编程日记 2023/10/5 18:26:15

JavaEE-网络编程套接字（UDP/TCP）

下面写一个简单的UDP客户端服务器流程 思路&#xff1a; 对于服务器端&#xff1a;读取请求&#xff0c;并解析–> 根据解析出的请求&#xff0c;做出响应(这里是一个回显&#xff0c;)–>把响应写回客户端 对于客户端&#xff1a;从控制台读取用户输入的内容–>从控制…...

编程日记 2023/10/5 18:24:14

微服务技术栈-Gateway服务网关

文章目录 前言一、为什么需要网关二、Spring Cloud Gateway三、断言工厂和过滤器1.断言工厂2.过滤器3.全局过滤器4.过滤器执行顺序 四、跨域问题总结 前言 在之前的文章中我们已经介绍了微服务技术中eureka、nacos、ribbon、Feign这几个组件&#xff0c;接下来将介绍另外一个组…...

编程日记 2023/10/5 18:23:13

函数形状有几种定义方式；操作符infer的作用

在 TypeScript 中&#xff0c;函数形状可以用多种方式进行定义。下面介绍了几种常用的函数形状定义方式&#xff1a; 函数声明&#xff1a; function add(a: number, b: number): number {return a b; }在函数声明中&#xff0c;我们直接使用 function 关键字来声明函数&…...

编程日记 2023/10/5 18:21:11

SNOMED CT入门指南：从概念、关系到数据文件，手把手带你理解这个医学术语标准

SNOMED CT技术解析&#xff1a;从数据结构到医疗信息系统的实战指南 在医疗信息化领域&#xff0c;数据标准化是打破信息孤岛的关键。当不同医院的电子病历系统使用各自独立的术语体系时&#xff0c;跨机构的数据交换就像一场没有翻译的多国会议——充满误解和低效。这正是SNOM…...

编程新知 2026/3/30 6:12:49

从基础到卓越：Mac Mouse Fix的技术演进与用户价值提升之路

从基础到卓越&#xff1a;Mac Mouse Fix的技术演进与用户价值提升之路 【免费下载链接】mac-mouse-fix Mac Mouse Fix - A simple way to make your mouse better. 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 解决鼠标体验痛点&#xff1a;从功能…...

编程新知 2026/3/30 6:02:36

当经典耦合器原理‘失灵’时：我在ADS里另辟蹊径优化90度电桥的实战记录

当经典耦合器原理‘失灵’时&#xff1a;我在ADS里另辟蹊径优化90度电桥的实战记录 射频工程师们对90度耦合电桥的设计规范早已烂熟于心——那些教科书上的理想模型、对称结构和完美参数。但当我在3.5GHz频段用Rogers 4003C板材实现时&#xff0c;仿真结果却总与理论预测相差甚…...

编程新知 2026/3/30 4:35:47

5大核心功能解析：MAA_Punish如何实现《战双帕弥什》全自动游戏体验

5大核心功能解析&#xff1a;MAA_Punish如何实现《战双帕弥什》全自动游戏体验 【免费下载链接】MAA_Punish 战双帕弥什每日任务自动化 | Assistant For Punishing Gray Raven 项目地址: https://gitcode.com/gh_mirrors/ma/MAA_Punish MAA_Punish是一款专为《战双帕弥什…...

编程新知 2026/3/30 3:39:04

从HPA到DepMap：手把手教你用蛋白质和细胞系数据，为你的单基因故事补充关键实验证据

从HPA到DepMap&#xff1a;数据驱动的单基因研究实验设计指南 当你在实验室里凝视着那个刚刚从测序数据中脱颖而出的候选基因时&#xff0c;是否曾为如何设计后续验证实验而犹豫不决&#xff1f;现代生物学研究早已告别了"试错式"的实验盲选时代。本文将带你系统掌握…...

编程新知 2026/3/30 2:50:39

Session 的默认失效时间是多长？如何配置和修改？

Session 的默认失效时间是多久&#xff1f;如何配置和修改&#xff1f;1. 引言&#xff1a;停车场的“免费停车券”2. 前置知识&#xff1a;Session 是什么&#xff1f;它为什么需要“失效”&#xff1f;3. 默认失效时间是多少&#xff1f;4. Session 超时的工作原理5. 如何配置…...

编程新知 2026/3/30 2:38:36

FatFileSystem：面向资源受限MCU的轻量级FAT文件系统

1. FatFileSystem 嵌入式 FAT 文件系统库深度解析FatFileSystem 是一个轻量级、可移植的嵌入式 FAT 文件系统实现&#xff0c;专为资源受限的微控制器环境设计。它并非完整重写的 FAT32 标准栈&#xff08;如 FatFs&#xff09;&#xff0c;而是对经典开源 FAT 实现的精简裁剪与…...

编程新知 2026/3/30 2:24:33

AI早报 | 2026.03.29（周日）

&#x1f916; AI 早报 | 2026.03.29&#xff08;周日&#xff09; 采集时间&#xff1a;2026-03-29 13:25 (Asia/Shanghai) &#x1f6e1;️ 安全/治理 1️⃣ Anthropic 安全漏洞泄露下一代模型 Mythos Anthropic 公司遭遇数据安全事件&#xff0c;未受保护的数据存储中泄露了…...

编程新知 2026/3/30 1:58:23

从零开始：Windows与Ubuntu20.04双系统安装全指南

1. 为什么需要双系统&#xff1f; 对于很多刚接触Linux的朋友来说&#xff0c;直接在物理机上安装Ubuntu可能会有点担心。毕竟Windows用习惯了&#xff0c;万一Ubuntu用不顺手怎么办&#xff1f;这时候双系统就是最好的解决方案。我自己的第一台开发机就是WindowsUbuntu双系统&…...

编程新知 2026/3/30 0:27:42

MSE、MAE、Binary/Categorical Cross-Entropy、HingeLoss五种损失函数的典型应用场景

目录第一类&#xff1a;回归任务&#xff08;预测具体数值&#xff09;&#x1f453;1. MSE (均方误差) —— 重罚离群点&#x1f453;2. MAE (平均绝对误差) —— 鲁棒性强第二类&#xff1a;分类任务&#xff08;判断属于哪一类&#xff09;&#x1f453;3. Binary Cross-Ent…...

编程新知 2026/3/29 23:55:23