JS代码如下,这里用了jq的语法:

<script type="text/javascript">
$(function(){
var text = $("#show_json").html();
var result = JSON.stringify(JSON.parse(text), null, 4);
$("#show_json").html("<pre>"+result+"</pre>");
});
</script>

html部分代码:

<table>
<tr>
<td>json: </td>
<td><p id="show_json">{"aaa":"111", "bbb":"222", "ccc":"333"}<p></td>
</tr>
</table>

看下效果图:

JS格式化JSON串显示在表格中的更多相关文章

  1. 将JSON数组显示前台Table中

    将JSON数组显示前台Table中 在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的 ...

  2. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  3. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  5. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  7. js 格式化 json 字符串

    1.JSON.stringify的三个参数 var json = {"@odata.context":"$metadata#AddTableOne_466281s&quo ...

  8. 8.在python中用data_only=True设置显示excel表格中公式的结果为None的解决方法

    在用python调用excel文件显示带公式的表格内容,有两种显示结果:第一种是直接显示表格中公式人内容:另一种是显示其表格中公式的结果. 显示第一种,可以这样输入代码: 显示第二种,可以这样输入代码 ...

  9. C#后台格式化JSON字符串显示

    很多时候我们从服务器上获取的JSON字符串是没有格式化的,如下: {"BusinessId":null,"Code":200,"Data": ...

随机推荐

  1. PyQt5-TableWidget 表格视图

    基于PyQt5 postgreSQL实现简单的数据插入.数据表格查询. 运行前需要安装psycopg2 模块,配置好postgerSQL. 先看效果图: 第1列为日期时间.第2列为自增1的编号.第3到 ...

  2. Shel脚本-初步入门之《06》

    Shel脚本-初步入门-06 Shell 脚本的建立和执行 6.Shell 脚本的建立和执行 6.1 Shell脚本的建立 在 Linux 系统中,Shell 脚本(bash Shell 程序)通常是 ...

  3. metasploit篇

    第一部分:基本使用 1.在kali中metasploit默认使用postgresql作为它的数据库: /etc/init.d/postgresql start 开机自启:update-rc.d pos ...

  4. 【cf915】E. Physical Education Lessons(线段树)

    传送门 简单的线段树区间修改区间查询,但是因为数据范围过大,所以采用动态开点的方法(注意一下空间问题). 也可以直接对询问区间的端点离散化然后建树,这种方法时间复杂度和空间复杂度都比较优秀. 给出动态 ...

  5. c# WF 第5节 窗体的控件

    本节内容: 1:控件在哪里 2:控件怎么添加 3:窗口的显示与隐藏 4:实例单击窗体,出现另一个窗体 1:控件在哪里 视图 --> 工具箱 2:控件怎么添加 第一种:从工具箱直接拉 第二种:在代 ...

  6. 创建testng.xml文件

    简单介绍 运行TestNG测试脚本有两种方式:一种是直接通过IDE运行(例如使用eclipse中的“Run TestNG tests”),另一种是从命令行运行(通过使用xml配置文件).当我们想执行某 ...

  7. springboot2.0 management.security.enabled无效

    在1.5.x版本中通过management.security.enabled=false来暴露所有端点 在使用springcloud的时候,如果基于springboot2的版本的配置中心,无法使用SV ...

  8. Docker相关安装和卸载

    安装: 1.Docker要求CentOS系统的内核版本高于 3.10 ,通过 uname -r 命令查看你当前的内核版本是否支持安账docker 2.更新yum包:sudo yum update 3. ...

  9. Javal连载4-注释&class与public class区别

    一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释 注释 注释 */ (3)javadoc注释 /* ...

  10. SpringBoot整合log4j2导入新的依赖出现jar冲突解决

    1.问题复现: 之前在SpringBoot中配置整合了log4j2,今天在pom文件中,导入新的依赖(依赖如下)之后, <dependency> <groupId>com.gi ...