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);
varobj=JSON.parse(result);//解析json字符串为json对象形式
vartrStr='';//动态拼接table
//varhtml='';
for(vari=0;i<obj.length;i++){//循环遍历出json对象中的每一个数据并显示在对应的td中
trStr+='<trclass="example">';//拼接处规范的表格形式
trStr+='<tdwidth="15%"style="display:none"id="user">'+obj[i].NVFID+'</td>';//数据表的主键值
trStr+='<tdwidth="15%">'+obj[i].USERCODE+'</td>';//对应数组表的字段值
trStr+='<tdwidth="15%">'+obj[i].USERNAME+'</td>';
trStr+='<tdwidth="15%">'+obj[i].USERPWD+'</td>';
trStr+='<td>'+obj[i].PHONEIMEI+'</td>';
trStr+='<td>'+obj[i].BMMC+'</td>';
/*经典之处，要将主键对应的值以json的形式进行传递，才能在后台使用*/
trStr+="<td><ahref='#'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> <!--显示后台数据的表格--> <tableid="mainTable"class="displayhover"border="1"> <thead> <tr> <th>用户编号</th> <th>用户名称</th> <th>用户密码</th> <th>手机号码</th> <th>部门名称</th> <thwidth="10%">操作</th> </tr> </thead> <tbodyid="tbody"> <trid="content"class="example"> <tdid="UserCode">2</td> <tdid="UserName">2</td> <tdid="UserPwd">2</td> <tdid="Bmmc">2</td> <tdid="Phone">2</td> </tr> </tbody> </table> </div>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！