js实现将json数组显示前台table中


Posted in Javascript onJanuary 10, 2017

在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题。具体的代码如下:

前提:利用ajax获取过来的JSON字符串必须是规范的,这样才能解析正确。后台获取数据库中数据的代码省略了

1、前台JS代码(使用之前引入JQuery的js库文件

$.ajax({
 type: "GET",
 url: "UserList.ashx?Action=List",//利用ajax请求后台的并返回值
 // data: "json",
 success: function (result) {//result为后台返回的值,是json字符串的形式
 // alert(result);
 var obj = JSON.parse(result);//解析json字符串为json对象形式
 var trStr = '';//动态拼接table
 // var html = '';
 for (var i = 0; i < obj.length; i++) {//循环遍历出json对象中的每一个数据并显示在对应的td中
 trStr += '<tr class="example">';//拼接处规范的表格形式
 trStr += '<td width="15%" style="display:none" id="user">' + obj[i].NVFID + '</td>';//数据表的主键值
 trStr += '<td width="15%">' + obj[i].USERCODE + '</td>';//对应数组表的字段值
 trStr += '<td width="15%">' + obj[i].USERNAME + '</td>';
 trStr += '<td width="15%">' + obj[i].USERPWD + '</td>';
 trStr += '<td>' + obj[i].PHONEIMEI + '</td>';
 trStr += '<td>' + obj[i].BMMC + '</td>';
 /*经典之处,要将主键对应的值以json的形式进行传递,才能在后台使用*/
 trStr += "<td><a href='#'style='text-decoration:none' onclick='Delete(\"" + obj[i].NVFID + "\")'>删除</a><td>";
 trStr += '</tr>';  
 } 
 $("#tbody").html(trStr);//运用html方法将拼接的table添加到tbody中return;
 },
 error: function (error) {
 alert(error);
 }
 });

2、前台HTML代码

<div>
 <!-- 显示后台数据的表格 -->
 <table id="mainTable" class="display hover" border="1">
 <thead>
 <tr>
 <th>用户编号</th>
 <th>用户名称</th>
 <th>用户密码</th>
 <th>手机号码</th>
 <th>部门名称</th>
 <th width="10%">操作</th>
 </tr>
 </thead>
 <tbody id="tbody">
 <tr id="content" class="example">
 <td id="UserCode">2</td>
 <td id="UserName">2</td>
 <td id="UserPwd">2</td>
 <td id="Bmmc">2</td>
 <td id="Phone">2</td>
 </tr>
 </tbody>
 </table>
 </div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
详解Vue自定义过滤器的实现
Jan 10 #Javascript
JS实现的表头列头固定页面功能示例
Jan 10 #Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 #Javascript
微信小程序 地图map详解及简单实例
Jan 10 #Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 #Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 #Javascript
jquery 正整数数字校验正则表达式
Jan 10 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php 可变函数使用小结
2018/06/12 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
就业推荐自我鉴定
2013/10/06 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
大学活动总结范文
2014/04/29 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
学校清明节活动总结
2014/07/04 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python