將JSON數組顯示前台Table中

將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>