1. 首頁
  2. 問答
  3. 將JSON轉換爲html表格

將JSON轉換爲html表格

2013-04-08 199 views
0

我已經完成的工作是： 我寫了一個PHP腳本，它反映了我的JSON數據結構。 我現在正在嘗試編寫一個Html腳本，它將以JSON格式獲得結果，但在下面的html表格中回顯出這是我的PHP腳本和我的嘗試HTM腳本。 關於我如何做到這一點的任何提示，我將不勝感激。將JSON轉換爲html表格

<html> 
<head> 
<title>Details B</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="robots" content="noindex, nofollow" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     JSONload(); 
    }) 
    function JSONload() { 
     $('#results').empty(); 
     $('<table id="table2" border="1"/>').appendTo('#results'); 
     $.get("details.php", {date1:$('#date_1').val(),date2:$('#date_2').val()}, function(result){ 
      for(elem in result[0]) 
       $('<th scope="col">'+elem+'</th>').appendTo('#table2'); 
      for(var i = 0; i <= result.length; i++) { 
       $('<tr id="'+(i)+'" />').appendTo('#table2'); 
       for(elem in result[i]) { 
        $('<td>'+result[i][elem]+'</td>').appendTo('#'+i); 
       } 
      } 
     },'json'); 
    } 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
    <div class="fixed"> 
    </div> 
</td> 
</tr> 
</table> 
<br /> 
<table border="1"> 
    <tr> 
     <th scope="col">Key</th> 
     <th scope="col">Value</th> 
    </tr> 
    <tr> 
    <td> <label for="date_1">Date as dd/mm/yyyy (date_1)</label></td> 
    <td> 
     <input name="date_1" type="text" class="larger" id="date_1" value="31/1/1970" size="12" /> 
    </td> 
    </tr> 
    <tr> 
      <td><label for="date_2">Date as dd/mm/yyyy (date_2)</label></td> 
    <td> 
     <input name="date_2" type="text" class="larger" id="date_2" value="31/1/1990" size="12" /> 
    </td> 
    </tr> 

    <tr> 
    <td>List name of all cyclists with their country's name, gdp and population</td> 
    <td><input type="button" onClick="JSONload()" name="submit" id="button" value="Submit" class="larger" /></td> 
    </tr> 

    <tr> 

    </tr> 
</table> 
<div id="results" /> 
</body> 
</html>

來源

2013-04-08 user2201189

+0

遍歷JSON數據，生成一個HTML字符串，那麼完成時，將它附加到你的新表中。你有什麼嘗試？ – 2013-04-08 14:25:59

+0

$（文件）。就緒（函數（）{ \t \t \t JSONload（）; \t \t}） \t \t功能JSONload（）{ \t \t \t $（ '＃結果'）空（）; \t \t \t $（'

'）。appendTo（'＃results'）; （）「，」date1「）。val（），date2：$（'＃date_2'）。val（）}，function（results）{ \t \t \t \t爲（在結果ELEM [0]） \t \t \t \t \t $（ '' + ELEM +」 '）.appendTo（' ＃table2' 的）; \t \t \t \t for（var i = 0; i <= result。長度; i ++）{ \t \t \t \t \t \t $（''）.appendTo('#table2'）; \t \t \t \t \t爲（在結果ELEM [I]）{ \t \t \t \t \t \t $（ '​​'+導致[I] [ELEM] +' '）.appendTo（' ＃' + I） ; \t \t \t \t \t} \t \t \t \t} \t \t \t}）; \t \t} – user22011892013-04-08 14:28:38

+2

@ user2201189請編輯該問題以包含該代碼。評論的確不是爲了處理除一行（或更少）片段之外的任何內容。 – 2013-04-08 14:30:46

回答

0

假設你的JSON數據回來在這樣這樣的格式：

[ 
    { 
     "name": "Lance Armstrong", 
     "country": "USA", 
     "gdp": 5000000000000, 
     "population": 350000000 
    }, 
    { 
     "name": "Someone Else", 
     "country": "France", 
     "gdp": 1000000000000, 
     "population": 70000000 
    } 
]

像你想的方法，下面將生成一個表：

function JSONload() { 
$.get("details.php", { 
    date1: $('#date_1').val(), 
    date2: $('#date_2').val() 
}, function (results) { 
    var $table = $('<table id="table2" border="1"/>');  

    var $headerRow = $("<tr></tr>"); 
    var keys = []; 
    var aRow = results[0]; 
    for (var key in aRow) { 
     keys.push(key); 
     $headerRow.append("<th>" + key + "</th>"); 
    } 
    $table.append($headerRow); 

    for (var i = 0; i < results.length; i++) { 
     var row = results[i]; 
     console.log(row); 
     var $rowEl = $("<tr id='" + i + "'></tr>"); 
     for (var j = 0; j < keys.length; j++) { 
      console.log(key); 
      key = keys[j]; 
      var value = row[key]; 
      $rowEl.append("<td>" + value + "</td>"); 
     } 
     $table.append($rowEl); 
    }  

$('#results2').empty().append($table);

需要注意的是拼湊的html使用jQuery的字符串不是最佳實踐。如果您正在尋找一個完整的網格，請檢查@ ADC答案中提出的解決方案之一。

如果您打算進行大量的JavaScript HTML生成，我建議您查看一個模板庫，如Handlebars或Underscore。這允許你寫乾淨，語義模板像下面（從把手取）：

模板

<script id="template" type="text/template"> 
    <h1>{{title}}</h1> 
    <ul class="people_list"> 
     {{#each people}} 
      <li>{{this}}</li> 
     {{/each}} 
    </ul> 
</script>

使用

var template = Handlebars.compile($("#template").html()); 
var html = template({ 
    "title": "My People", 
    "people": [ 
     "John Jones", 
     "Mary Smith", 
     "Suzie Smart" 
    ] 
}); 
$("results").html(html);

來源

2013-04-08 16:07:44 brettjonesdev

2

我建議你去看看一些流行的jQuery插件：

  • DataTables。我在幾個項目中使用它。通常我會創建一個由客戶端調用的處理程序來提供JSON格式的數據。該插件負責渲染，分頁，啓用排序和過濾。

  • jqGrid。我沒有經驗，但它被一個巨大的社區使用。

來源

2013-04-08 15:24:58

相關問題

 相關問題