html页面展示json数据并格式化

json数据在html页面展示并格式化

一、展现效果图

描述信息：

key值全部采用红色标出，表示重要参数；
value值采用不同颜色标出，数值类型的采用橘黄色，字符串采用绿色，布尔采用蓝色。。。

二、源代码展示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }.string { color: green; }.number { color: darkorange; }.boolean { color: blue; }.null { color: magenta; }.key { color: red; }.showinfo{position: absolute;background-color: #eef1f8;width: 200px;padding: 5px;border-radius: 4px;border: 1px solid #ccc;display: none;}.showinfo pre{padding: 5px;border: 1px solid #ccc;margin:0;}table,th,td{border:1px solid blue;}
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".show-rough").mouseover(function(){var left = $(this).offset().left + $(this).width() +20;//计算div显示位置var top = $(this).offset().top + 20;var _jsonDate = $.parseJSON($(this).text());var showJson = syntaxHighlight(_jsonDate);$("#show-info").css({"left":left,"top":top}).show();$("#show-pre").html(showJson);});$(".show-rough").mouseout(function(){$("#show-info").hide().html();$("#show-pre").html();})});//处理json数据，采用正则过滤出不同类型参数function syntaxHighlight(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, 2);}json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {var cls = 'number';if (/^"/.test(match)) {if (/:$/.test(match)) {cls = 'key';} else {cls = 'string';}} else if (/true|false/.test(match)) {cls = 'boolean';} else if (/null/.test(match)) {cls = 'null';}return '<span class="' + cls + '">' + match + '</span>';});
};
</script>
</head>
<body>
<table><thead><tr><th>姓名</th><th>json数据</th></tr></thead><tbody><tr><td>小三</td><td class="show-rough">{ "name": "小三", "address":"北京路23号","age":16, "email": "123456@qq.com","Object":[{"职位":"经理"}],"del":[] }</td></tr><tr><td>小四</td><td class="show-rough">{ "name": "小四", "address":"上海路01号","age":27, "email": "222222@qq.com","Object":[],"del":[]  }</td></tr></tbody>
</table>
<div id="show-info" class="showinfo"><pre id="show-pre"></pre>
</div>
</body>
</html>

三、源代码上传

源代码下载地址

html页面展示json数据并格式化相关推荐

如何将json数据并格式化—html
今天分享下"如何将json数据并格式化-html"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
ExtJS grid简单应用之展示JSON数据
Grid功能: 展示json数据,编辑行,排序,分页.分页功能要根据请求URL的参数,在服务器端返回相应JSON,此处服务端未写.(url参数,可通过firebug控制台查看) 1,首先引用 < ...
使用Jquery插件jsonview来展示json数据
项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonview来解决这个问题. 首先,去jquery官网下载最新的jsonview插件,放在js目录中,下载地址: ...
html json解析插件,jQuery插件jsonview展示json数据
本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码,供大家参考,具体内容如下项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonv ...
Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦首先我们使用谷歌浏览器 inspect ...
html页面展示Json样式
一般有些做后台数据查询,要把后台返回json数据展示到页面上,如果需要展示样式更清晰.直观.一目了然,就要用到html+css+js实现这个小功能一.css代码 pre {outline: 1px ...
一个能在vue3中运行的JSON编辑器，能展示JSON数据的高亮，打开时有默认数据
以下是一个可以在Vue 3中运行的JSON编辑器组件.它使用了元素来输入JSON数据,并使用JSON.parse()将输入的JSON数据解析为JavaScript对象.解析成功后,将在编辑器下方展示高 ...
html页面返回json数据为空,在Html页面中，展示出Json格式数据，且保持缩进格式...
1.定义一个标签,给个id值. 2.用js定义一个json字符串,用jQuery给id,赋值 var songResJson = { "id" : "b52c96bea3 ...
jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

html页面展示json数据并格式化

json数据在html页面展示并格式化

一、展现效果图

二、源代码展示

三、源代码上传

html页面展示json数据并格式化相关推荐

最新文章

热门文章