在Java腳本中將JSON值設置爲HTML表格？

function loadUserTable(userType){ 
      $.ajax({ 
       type: "POST", 
       url: "loadUserTable.html", 
       data: "userType=" + userType, 
       success: function(response){ 

        alert(response); 

       }, 
      }); 
}

我還在工作呢，我打印輸出警報，並在HTML表格有如下在Java腳本中將JSON值設置爲HTML表格？

[{ 
     "userId":1, 
     "email":"[email protected]", 
     "mobile":"9900082195", 
     "gender":"male", 
     "qualification":"1", 
     "dob":"2016-01-01", 

     "login":{ 
      "loginId":1, 
      "userName":"santosh", 
      "password":"santosh", 
      "userType":"admin" 
     } 
    }]

我想上面的JSON值，這可能嗎？如果是，那麼我只是想知道，它是如何做到的？

來源

2016-01-22 Santosh Jadi

的http：// stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table你有沒有研究過？ – thatOneGuy

是的，您可以循環瀏覽並將其發佈到HTML代碼中。請發表您已經嘗試過的事情，以便我們可以告訴您您做錯了什麼。 – uruloke

可能重複的[jQuery的 - JSON到

]（http://stackoverflow.com/questions/5996805/jquery-json-to-table） – godzillante

回答

得到了解決,,謝謝ü所有的實物支持

function loadUserTable(userType){ 
       $.ajax({ 
        type: "POST", 
        url: "loadUserTable.html", 
        data: "userType=" + userType, 
        success: function(response){ 
         var obj = JSON.parse(response); 
         $("#tableId").html(""); 
         var tr+="<tr><th>User ID</th><th>User Name</th></tr>"; 
         for (var i = 0; i < obj.length; i++){ 
           tr+="<tr>"; 
           tr+="<td>" + obj[i].userId + "</td>"; 
           tr+="<td>" + obj[i].login.userName + "</td>"; 
           tr+="</tr>"; 
         } 
         $("#tableId").append(tr); 
        } 
       }); 
     }

來源

2016-01-23 06:52:41

是的，這是可能的。如果你想在簡單的html表格中打印json數據，那麼只需迭代（使用循環）直到你的json長度並在循環內構建你的表格。

但我會建議你使用dataTable/bootstrap表插件，你只需要在初始化時傳遞json。

例如，

$(document).ready(function() { 
    $.getJSON(url, 
    function (json) { 
     var tr; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].User_Name + "</td>"); 
      tr.append("<td>" + json[i].score + "</td>"); 
      tr.append("<td>" + json[i].team + "</td>"); 
      $('table').append(tr); 
     } 
    }); 
});

來源

2016-01-22 11:13:52

看到上面給出的示例代碼.. –

看到你有嵌套的JSON解析它正確然後構造你的表 –

例子只是想法，如果你有json對象，你只需要在for循環中迭代它。等待我給你簡單的例子 –

你最好簡單隻需創建一個for循環中success如下：

的obj[i]樓下只是一個佔位符。你必須得到你想要放在那裏的正確值。

HTML表格容器：

<div id="tableContainer"> 
    <table> 
    <tbody class="tableBody"> 
    <tbody> 
    </table> 
</div>

JSON追加到表：

function loadUserTable(userType) 
    { 
       var TableHTML = ''; 
       $.ajax({ 
        type: "POST", 
        url: "loadUserTable.html", 
        data: "userType=" + userType, 
        success: function(response){ 
         alert("eeee: "+response); 
         var obj = JSON.parse(response); 

         for (i = 0; i < obj.length; i++) 
         { 
          TableHTML += '<tr><td>' + obj[i].userId + '</td></tr>'; 
         } 
        }, 
       }); 

       $(".tableBody").append(TableHTML); 
    }

來源

2016-01-22 11:23:20

@ChrisBeckett只是一個指針，操縱循環中的DOM元素是不好的做法。創建一個變量並以字符串格式附加HTML，最後將這個HTML附加到元素 – Rajesh

@Rajesh - 你在這裏是正確的，我已經更新了我的答案，以擺脫不良習慣。 –

相關問題