Question

我已经做的是：我写了一个PHP脚本，它回应了我的JSON数据结构。我现在正在尝试编写一个Html脚本，它将以JSON格式获得结果，但在下面的html表中回显这是我的PHP脚本和我的尝试HTM脚本。关于我如何做到这一点的任何提示，我将不胜感激。

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

Answer 1

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

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

Answer 2

假设您的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);

请注意，使用jQuery拼接html字符串并非最佳做法。如果您正在寻找一个完整的网格，请查看@ ADC答案中建议的解决方案之一。

如果您要进行大量的JavaScript HTML生成，我建议您查看模板库，例如Handlebars或Underscore。这些允许您编写如下所示的干净的语义模板（取自Handlebars）：

模板

<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);

将JSON转换为html表

2 个答案: