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. Firefox 与 geckodriver 版本兼容问题

    打开 python shell,执行以下脚本: from selenium import webdriverdriver = webdriver.Firefox()driver.maximize_wi ...

  2. MATLAB高斯混合数据的生成

    MATLAB高斯混合数据的生成 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 高斯混合模型的基本原理:聚类——GMM,MATLAB中GMM聚类算法:M ...

  3. 面向对象程序设计(Java) 第7周学习指导及要求

    2019面向对象程序设计(Java)第7周学习指导及要求 (2019.10.11-2019.10.14) 学习目标 掌握四种访问权限修饰符的使用特点: 掌握Object类的用途及常用API: 掌握Ar ...

  4. 炫酷的CSS3响应式表单

    原创YouTube@ Online Tutorials css代码: * { margin: 0; padding: 0; box-sizing: border-box; font-family: ' ...

  5. strcpy&memcpy&memmove

    strcpy extern char *strcpy(char *dest,char *source); { assert((dest!=NULL)&&(source!=NULL)); ...

  6. 使用Fiddler模拟弱网测试教程

    一.下载抓包工具Fiddler 官网下载链接:https://www.telerik.com/fiddler 二.设置Fiddler Tools>>Connections  然后修改监听端 ...

  7. 题解:T103180 しろは的军训列队

    题目链接 solution: 按题目随便假设找到了一个x,它的位置的ap,属性bp 看下图 $$$$$$$$$$$$$$$$|||||P &&&&&&& ...

  8. 线程让步yield

    一.yield()的作用 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并不能保证在当前线程调用yield()之后,其 ...

  9. angular设置全局变量,修改监听变量

    创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeShar ...

  10. Django cache (缓存)

    五种配置 1.开发调试 # 此为开始调试用,实际内部不做任何操作 # 配置: CACHES = { 'default': { 'BACKEND': 'django.core.cache.backend ...