JSON动态生成表格

<!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对象,实现动态更新表单。

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/73849.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring的创建及使用

文章目录 什么是SpringSpring项目的创建存储Bean对象读取Bean对象getBean()方法 更简单的读取和存储对象的方式路径配置使用类注解存储Bean对象关于五大类注解使用方法注解Bean存储对象Bean重命名 Bean对象的读取 使用Resource注入对象Resource VS Autowired同一类型多个bean对…

怎么让表格中的一行数据 转置 为一列数据 (WPS )

例如 我现在有一列数据 我想要 变成一行 数据 1.首先选中想要转置的数据&#xff0c;然后control C 2.接着 点击你想放置数据的位置 右键 其实 关键是 找到 选择性复制 3. 找到转置&#xff0c;勾选 最后 确定 反之亦然

PoseiSwap:基于 Nautilus Chain ,构建全新价值体系

在 DeFi Summer 后&#xff0c;以太坊自身的弊端不断凸显&#xff0c;而以 Layer2 的方式为其扩容成为了行业很长一段时间的叙事方向之一。虽然以太坊已经顺利的从 PoW 的 1.0 迈向了 PoS 的 2.0 时代&#xff0c;但以太坊创始人 Vitalik Buterin 表示&#xff0c; Layer2 未来…

TWS真无线蓝牙耳机哪家好?六款口碑好的TWS真无线蓝牙耳机分享

为了帮助大家在这个充满选择的世界中找到最理想的蓝牙耳机&#xff0c;我们特别为您精心挑选了几款备受赞誉的产品&#xff0c;它们在音质、舒适度、功能和性价比等方面都有出色的表现。在本文中&#xff0c;我们将深入探讨这些蓝牙耳机的特点和优势&#xff0c;帮助您更好地了…

智能化RFID耳机装配系统:提升效率、精准追踪与优化管理

智能化RFID耳机装配系统&#xff1a;提升效率、精准追踪与优化管理 在当今的智能化时代&#xff0c;无线射频识别技术&#xff08;RFID&#xff09;被广泛应用于各个行业。本文将介绍一种基于RFID技术的智能耳机装配案例&#xff0c;通过RFID技术实现耳机装配过程的自动化控制…

Github Pages自定义域名

Github Pages自定义域名 当你想在网上发布内容时&#xff0c;配置Github Pages是一个很好的选择。如果你想要在自己的域名上发布&#xff0c;你可以使用Github Pages来创建自己的网站。本文将介绍如何使用Github Pages自定义域名。 这里呢先列出前置条件&#xff1a; 您的Gi…

在使用Python爬虫时遇到503 Service Unavailable错误解决办法汇总

在进行Python爬虫的过程中&#xff0c;有时会遇到503 Service Unavailable错误&#xff0c;这意味着所请求的服务不可用&#xff0c;无法获取所需的数据。为了解决这个常见的问题&#xff0c;本文将提供一些解决办法&#xff0c;希望能提供实战价值&#xff0c;让爬虫任务顺利完…

mysql的json处理

需要注意&#xff0c;5.7以上版本才支持&#xff0c;但如果是生产环境需要使用的话&#xff0c;尽量使用8.0版本&#xff0c;因为8.0版本对json处理做了比较大的性能优化。你你可以使用select version();来查看版本信息。 本文看下MySQL的json处理。在正式开始让我们先来准备一…

DTCC2023第十四届中国数据库大会分享:MySQL性能诊断平台:利用eBPF技术实现高效的根因诊断

主题 8月16-18日 DTCC2023第十四届中国数据库大会在北京国际会议中心召开&#xff0c;17日下午在云原生数据库开发与实践分论坛&#xff0c;我将带来分享&#xff1a;《MySQL性能诊断平台&#xff1a;利用eBPF技术实现高效的根因诊断》敬请期待&#xff01; 欢迎大家提前试用我…

zsh中安装ros-<ros2-distro>-turtlebot3*失败 || 以humble为例

在zsh中尝试使用 sudo apt install ros-<ros2-distro>-turtlebot3* 安装turtlebot3相关仿真包失败&#xff0c;报错E: 无法定位软件包。 但是在bash中尝试使用同样的命令却可以安装。 原因是zsh中如果要使用通配符&#xff0c;那么一定要放在字符串里&#xff0c;以上…

不能乱点链接之获取cookie

这里是浏览器存储的某个网址的cookie 然后点击了链接就把参数获取到 因为document.cookie 会直接获取到浏览器cookie 所以为了拦截 存cookie的时候要设置&#xff1a; 设置httpOnly 只要http协议能够读取和携带 再document.cookie 就为空了 原文链接&#xff1a; 尚硅谷课程…

Github-Copilot初体验-Pycharm插件的安装与测试

引言&#xff1a; 80%代码秒生成&#xff01;AI神器Copilot大升级 最近copilot又在众多独角兽公司的合力下&#xff0c;取得了重大升级。GitHub Copilot发布还不到两年&#xff0c; 就已经为100多万的开发者&#xff0c;编写了46%的代码&#xff0c;并提高了55%的编码速度。 …

下级平台级联视频汇聚融合平台EasyCVR,层级显示不正确的原因排查

视频汇聚平台安防监控EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、HLS、WebRTC等…

什么是线程?为什么需要线程?和进程的区别?

目录 前言 一.线程是什么&#xff1f; 1.1.为什么需要线程 1.2线程的概念 1.3线程和进程的区别 二.线程的生命周期 三.认识多线程 总结 &#x1f381;个人主页&#xff1a;tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主 &#x1f3a5; 本文由 tq02 原创&#xf…

【机器学习】Feature scaling and Learning Rate (Multi-variable)

Feature scaling and Learning Rate 1、数据集2、学习率2.1 α \alpha α 9.9e-72.2 α \alpha α 9e-72.3 α \alpha α 1e-7 3、特征缩放3.1 特征缩放的原因3.2 Z-score 归一化3.3 预测3.4 损失等值线 导入所需的库 import numpy as np np.set_printoptions(precision…

采集数据筛选-过滤不要数据或只保留指定数据

采集文章数据&#xff0c;有时候会遇到一些不需要采集的数据&#xff0c;或者只想采集一些特定的数据&#xff0c;可以使用简数采集器的内容过滤功能&#xff0c;对采集的数据进行筛选&#xff0c;只有符合的数据才采集保留。 可以用于过滤掉一些广告、专题、网站首页等无效数…

计算机毕设 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff0c;这两年不断有学弟学妹告诉学长…

如何下载Bootstrap?编译版与源码版有何区别?Bootstrap的编译版下载下来之后有哪些文件?

01-进入Bootstrap的官网 https://getbootstrap.com/ 02-右上角选择"All versions",或者直接通过URL进入版本选择界面&#xff1a; https://getbootstrap.com/docs/versions/ 03-在页面中根据自己的需要选择版本下载。 通常下载编译版(Compiled版)&#xff0c…

C语言sprintf函数的简明介绍(头文件/自动添加杠0/与printf函数的区别)

介绍 一句话&#xff0c;与printf唯一的区别&#xff1a; printf函数打印输出到屏幕上&#xff0c;而sprintf函数打印到字符串中。 与printf同样支持&#xff1a;控制精度、将多个数值数据连接起来、打印某变量的地址、格式化数字字符串 自动在末尾添加\0&#xff0c;不用担…

链表(二) 双链表操作详解

文章目录 四、双向带头循环链表的实现List.hList.c创建返回链表的头结点双向链表打印双向链表尾插双向链表尾删双向链表头插双向链表头删双向链表查找双向链表在pos的前面进行插入双向链表删除pos位置的节点 五、单链表与双链表比较 什么是链表及单链表的实现请跳转&#xff1a…