将JSON转换为html表格

我已经完成的工作是：我写了一个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

遍历JSON数据，生成一个HTML字符串，那么完成时，将它附加到你的新表中。你有什么尝试？ – 2013-04-08 14:25:59

$（文件）。就绪（函数（）{ \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

@ user2201189请编辑该问题以包含该代码。评论的确不是为了处理除一行（或更少）片段之外的任何内容。 – 2013-04-08 14:30:46

回答

假设你的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

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

DataTables。我在几个项目中使用它。通常我会创建一个由客户端调用的处理程序来提供JSON格式的数据。该插件负责渲染，分页，启用排序和过滤。
jqGrid。我没有经验，但它被一个巨大的社区使用。

来源

2013-04-08 15:24:58

将JSON转换为html表格

回答

相关问题