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

在最近的学习中遇到一个小问题，如何把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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！