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

JSON动态生成表格

news 2026/5/16 13:45:11 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var fromjava="{\"total\":3,\"students\":[{\"name\":\"张三\",\"age\":20},{\"name\":\"李四\",\"age\":19},{\"name\":\"王五\",\"age\":21}]}"window.onload = function(){document.getElementById("displaybtn").onclick = function(){//转化json对象window.eval("var stu = "+fromjava);//设置总条数document.getElementById("spans").innerHTML = stu.total;//拼接htmlvar stuArray=stu.students;var html="";for(var i=0;i<stuArray.length;i++){var s= stuArray[i];html+="<tr>";html+="<td>"+(i+1)+"</td>";html+="<td>"+s.name+"</td>";html+="<td>"+s.age+"</td>";html+="</tr>";}//拼接到表格中document.getElementById("stubody").innerHTML = html;}}</script><input type="button" value="查看学生信息" id="displaybtn"><hr><table border="1px" width="40%"><tr><th>序号</th><th>姓名</th><th>年龄</th></tr><tbody id="stubody"></tbody></table>总记录条数<span id="spans">0</span></body>
</html>

此表格默认从后端取出数据，数据拼接成json格式的字符串，将json格式的字符串转化为js，然后再js中把json格式的字符串转化为json对象，实现动态更新表单。

 当点击按钮时，会获取数据。

 

相关文章：

JSON动态生成表格

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><script>var fromjava"{\"total\":3,\"students\":[{\"name\":\"张三\",\&q…...

编程日记 2023/8/1 17:29:17

C# Winform中使用SendMessage方法(发送消息与接收消息)

C# Winform窗口间消息通知&#xff0c;使用Windows API SendMessage方法跨进程实现消息发送&#xff0c;重写WndProc方法接收消息并消息处理 主要使用到如下三个方法函数&#xff1a; WndProc&#xff1a;主要用在拦截并处理系统消息和自定义消息 可以重写WndProc函数&#xf…...

编程日记 2023/8/1 17:28:16

Netty各组件基本用法、入站和出站详情、群聊系统的实现、粘包和拆包

Netty Bootstrap和ServerBootstrapFuture和ChannelFutureChannelSelectorNioEventLoop和NioEventLoopGroupByteBuf示例代码 Channel相关组件入站详情出站详情对象编解码ProtoBuf和ProtoStuffnetty实现群聊系统粘包和拆包TCP协议特点举个例子 Bootstrap和ServerBootstrap Boots…...

编程日记 2023/8/1 17:27:13

Day03-作业（AxiosElementUI）

作业1&#xff1a; 根据需求完成如下页面数据列表展示 需求&#xff1a;Vue挂载完成后,通过axios发送异步请求到服务端,获取学生列表数据,并通过Vue展示在页面上 获取数据url&#xff1a;http://yapi.smart-xwork.cn/mock/169327/student 素材&#xff1a; <!DOCTYPE html…...

编程日记 2023/8/1 17:26:12

低代码开发平台源码：基于模型驱动，内置功能强大的建模引擎，零代码也能快速创建智能化、移动化的企业应用程序

管理后台低代码PaaS平台是一款基于 Salesforce Platform 的开源替代方案&#xff0c;旨在为企业提供高效、灵活、易于使用的低代码开发平台。低代码PaaS平台的10大核心引擎功能:1.建模引擎 2.移动引擎 3.流程引擎 4.页面引擎 5.报表引擎 6.安全引擎 7.API引擎 8.应用集成引擎 9…...

编程日记 2023/8/1 17:25:11

下载JMeter的历史版本——个人推荐5.2.1版本

官网地址&#xff1a;https://archive.apache.org/dist/jmeter/binaries/...

编程日记 2023/8/1 17:24:10

2023-07-30 LeetCode每日一题（环形链表 II）

2023-07-30每日一题 一、题目编号 142. 环形链表 II二、题目链接 点击跳转到题目位置 三、题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 n…...

编程日记 2023/8/1 17:23:08

设计模式——简单工厂模式

1 概述 将创造对象的工作交给一个单独的类来实现 &#xff0c;这个单独的类就是工厂。 2 实现 假设要做一个计算器的需求&#xff0c;通常我们想到的是这样写&#xff1a; package com.example.easyfactory;import java.util.Scanner;public class Demo1 {public static vo…...

编程日记 2023/8/1 17:22:07

AnimatedVectorDrawable矢量图动画的使用和修改

文章目录 一、前言二、一个矢量图文件三、参考链接 一、前言 矢量可绘制对象可以提供比较复杂的动画效果&#xff0c;只是绘制比较复杂&#xff0c;这里可以让UI使用Adobe After Effects软件制作出相关的矢量图xml文件交由开发使用。只是如果需要重复播放的动画效果时候&#…...

编程日记 2023/8/1 17:21:05

【C++】—— 多态的基本介绍

前言&#xff1a; 在之前的学习过程中&#xff0c;我们已经对继承进行了详细的学习和了解。今天&#xff0c;我将带领大家学习的是关于 多态 的基本知识。 目录 &#xff08;一&#xff09;多态的概念 1、概念 &#xff08;二&#xff09;多态的定义及实现 1、多态的构成条…...

编程日记 2023/8/1 17:20:04

一文详解：自动化测试工具——Selenium

前言 Selenium是一个用于Web应用程序测试的工具。是一个开源的Web的自动化测试工具&#xff0c;最初是为网站自动化测试而开发的&#xff0c;类型像我们玩游戏用的按键精灵&#xff0c;可以按指定的命令自动操作&#xff0c;不同是Selenium可以直接运行在浏览器上&#xff0c;…...

编程日记 2023/8/1 17:19:03

[模版总结] - 集合划分类DFS模版

题目描述 给定一个数组&#xff0c;给定一个数字k, 问能不能讲数组内数等分成k份&#xff0c;使得每一个集合中数和相等。 题目链接 下面两道题问题及其类似&#xff0c;可作为同一类题目思考 Leetcode 698 Leetcode 473 题目思路 这道题是一道经典集合划分类问题&#…...

编程日记 2023/8/1 17:18:02

JavaScript中复制新的数组与原数组删除某个值——不影响新复制的数组的方法详解

系列文章目录 文章目录 系列文章目录前言一、使用slice()方法复制数组二、使用concat()方法复制数组三、使用扩展运算符(...)复制数组总结 前言 在JavaScript中&#xff0c;我们经常需要处理数组的复制和修改。本文将详细介绍如何在JavaScript中复制一个新的数组&#xff0c;并…...

编程日记 2023/8/1 17:16:58

easyui主表子表维护页面

easyui主表子表维护页面 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title><!-- <#include "common.html"/> --><link rel"stylesheet" type&quo…...

编程日记 2023/8/1 17:15:55

k8s exam

Pause 容器是 Pod 中的第一个启动的容器&#xff0c;其他所有的用户容器都是其子进程当 Pod 被从节点中删除时&#xff0c;与之关联的 emptyDir 中的数据也将被永久删除。持久存储用PV&#xff0c;PVCService 资源定义了如何访问应用&#xff0c;但实际的网络流量管理和路由是由…...

编程日记 2023/8/1 17:14:49

C#，中国福利彩票《刮刮乐》的数学算法（02）——时来运转

1 中国福利彩票 中国福利彩票始于1987年7月27日&#xff0c;以“团结各界热心社会福利事业的人士&#xff0c;发扬社会主义人道主义精神&#xff0c;筹集社会福利资金&#xff0c;兴办残疾人、老年人、孤儿福利事业和帮助有困难的人”、即“扶老、助残、救孤、济困”为宗旨。随…...

编程日记 2023/8/1 17:13:48

我的观影记录表【个人向】

目录 前言电影评分标准闪电侠&#xff08;2023&#xff09;银河护卫队3&#xff08;2023&#xff09; 前言 这里是我本人的观影记录&#xff0c;这个想法2年前就有了&#xff0c;但是一直比较懒&#xff0c;现在&#xff08;上班摸鱼&#xff09;准备重新开始&#xff0c;评价…...

编程日记 2023/8/1 17:12:45

网络安全策略应包含哪些？

网络安全策略是保护组织免受网络威胁的关键措施。良好的网络安全策略可以确保数据和系统的保密性、完整性和可用性。以下是一个典型的网络安全策略应包含的几个重要方面&#xff1a; 1. 强化密码策略&#xff1a;采用强密码&#xff0c;要求定期更换密码&#xff0c;并使用多因…...

编程日记 2023/8/1 17:11:44

【Git】Git GitHub

1. Git1.1 Git基本操作1.2 Git版本回退1.3 Git分支操作 2. Git 配合GitHub2.1 生成密钥2.2 GitHub添加公钥2.3 Git连接GitHub2.4 本地仓库关联远程仓库2.5 本地代码push远程仓库2.6 本地clone远程仓库2.7 本地fetch和pull 1. Git 1.1 Git基本操作 touch test.py 工作区创建文…...

编程日记 2023/8/1 17:10:43

[STL]详解list模拟实现

[STL]list模拟实现 文章目录 [STL]list模拟实现1. 整体结构总览2. 成员变量解析3. 默认成员函数构造函数1迭代器区间构造函数拷贝构造函数赋值运算符重载析构函数 4. 迭代器及相关函数迭代器整体结构总览迭代器的模拟实现begin函数和end函数begin函数和end函数const版本 5. 数据…...

编程日记 2023/8/1 17:09:42

ACK多集群配置同步：MCP Server架构、部署与实战指南

1. 项目概述&#xff1a;ACK多集群管理平台的服务端核心如果你正在或计划使用阿里云容器服务ACK来管理多个Kubernetes集群&#xff0c;并且对如何高效、统一地分发应用配置感到头疼&#xff0c;那么你很可能已经接触或正在寻找类似“ack-mcp-server”这样的解决方案。这个项目&…...

编程新知 2026/5/16 13:22:44

Midjourney铂金印相风格实战手册（从Prompt工程到Lightroom精修全流程）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;铂金印相风格的美学溯源与数字复现逻辑 铂金印相&#xff08;Platinum Print&#xff09;诞生于19世纪晚期&#xff0c;以铂族金属盐在纸基上直接成像&#xff0c;呈现无光泽、宽广影调与近乎永久的化学…...

编程新知 2026/5/16 13:11:21

2025 上海 GEO 优化公司最新权威推荐：技术领航者与合作指南

一、核心关键词GEO 优化、生成式引擎优化、AI 搜索流量、上海 GEO 公司、本地服务 GEO、跨境 GEO、DeepSeek 排名优化、豆包排名优化、装修行业 GEO、B2B 获客优化、全域 AI 营销、合规 GEO 服务二、GEO 简介及上海市场现状分析1. GEO 核心定义GEO&#xff08;Generative Engin…...

编程新知 2026/5/16 12:47:31

MoviePilot媒体元数据服务连接异常的技术诊断与系统解决方案

MoviePilot媒体元数据服务连接异常的技术诊断与系统解决方案 【免费下载链接】MoviePilot NAS媒体库自动化管理工具 项目地址: https://gitcode.com/gh_mirrors/mo/MoviePilot MoviePilot作为专业的NAS媒体库自动化管理工具&#xff0c;其核心功能依赖于TheMovieDb&…...

编程新知 2026/5/16 12:41:26

构建多模型备选策略以提升AI应用服务稳定性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 构建多模型备选策略以提升AI应用服务稳定性 在将大模型能力集成到生产应用时&#xff0c;服务可用性是核心考量之一。依赖单一模型…...

编程新知 2026/5/16 11:13:11

AI智能体操作系统Agent-OS：架构、实现与生产部署指南

1. 项目概述&#xff1a;一个为AI智能体设计的操作系统最近在AI智能体开发领域&#xff0c;一个名为“Agent-OS”的项目引起了我的注意。这个项目由 factspark23-hash 团队开源&#xff0c;它不是一个传统意义上的操作系统&#xff0c;比如Windows或Linux&#xff0c;而是一个专…...

编程新知 2026/5/16 10:15:29

终极指南：3分钟掌握Deepin Boot Maker，轻松制作Linux启动盘

终极指南&#xff1a;3分钟掌握Deepin Boot Maker&#xff0c;轻松制作Linux启动盘 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker 你是否曾经因为复杂的命令行操作而对Linux系统安装望而却步&#xff1f;或者面对…...

编程新知 2026/5/16 8:47:36

API v2.0 设计规范

API v2.0 设计规范 【免费下载链接】marp-cli A CLI interface for Marp and Marpit based converters 项目地址: https://gitcode.com/gh_mirrors/ma/marp-cli 认证机制 // JWT 认证示例 const token jwt.sign({ userId: user.id },process.env.JWT_SECRET,{ expires…...

编程新知 2026/5/16 8:34:12

Ryujinx模拟器三部曲：从新手到专家的Switch游戏PC体验进阶指南

Ryujinx模拟器三部曲&#xff1a;从新手到专家的Switch游戏PC体验进阶指南 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 你是否曾梦想在电脑上畅玩《塞尔达传说&#xff1a;旷野之息…...

编程新知 2026/5/16 8:31:59

DIY蓝牙光桌：基于CircuitPython与NeoPixel的智能照明方案

1. 项目概述几年前&#xff0c;当我重新拾起钢笔书写的爱好时&#xff0c;一个看似简单却令人困扰的问题出现了&#xff1a;如何在优质但往往偏厚的信纸上写出整齐、笔直的行列&#xff1f;传统的纸质衬线格在纸下常常模糊不清。作为一名习惯了用技术解决问题的硬件爱好者&…...

编程新知 2026/5/16 7:35:58