指引网

当前位置: 主页 > 网页制作 > JavaScript >

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

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:36
[摘要]  这篇文章介绍了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

                      // var html = '';

                      for(vari = 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>

                     <!-- 显示后台数据的表格 -->

                     <tableid="mainTable"class="display hover"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>

------分隔线----------------------------