Question

Html代码

    <html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>

$(function() {


var dmJSON = "three.json";
$.getJSON( dmJSON, function(data) {
   $.each(data.records, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.Clue + "</td>" + "<td>" + f.Answer + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.Views + "</td>" + "</tr>"
       $(tblRow).appendTo("#entrydata tbody");
 });

});

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
<thead>


    </thead>
  <tbody>

   </tbody>
</table>

</div>
</div>

</body>

</html>

JSON数据

{
"records": [
  {
    "Clue" : "First Clue",
    "Answer" : "Answer to the first clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
  {
    "Clue" : "Second Clue",
    "Answer" : "Answer to the second clue",
    "Status" : "Rejected",
    "Views" : "15"
  },
    {
    "Clue" : "Third Clue",
    "Answer" : "Answer to the third clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Fourth Clue",
    "Answer" : "Answer to the fourth clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Fifth Clue",
    "Answer" : "Answer to the fifth clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Sixth Clue",
    "Answer" : "Answer to the sixth clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Seventh Clue",
    "Answer" : "Answer to the seventh clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Eigth Clue",
    "Answer" : "Answer to the eigth clue",
    "Status" : "Rejected",
    "Views" : "10"
  },
    {
    "Clue" : "Nintht Clue",
    "Answer" : "Answer to the ninth clue",
    "Status" : "Rejected",
    "Views" : "10"
  }
]
}

从上面的代码中，JSON数据存储在一个表中。我想将每条记录存储在不同的表中。有8条记录，所以我想要8个表，每个表有1条记录。例如：在第一张表中，我希望存储第一条记录（即第一条线索，第一条线索的答案，拒绝10条）同样在第二个表中我想存储第二个记录。怎么做？任何解决方案将不胜感激。提前致谢

Answer 1

如果要在单独的表中呈现每个记录，那么最好的办法是动态创建表。例如：

$(function() {
    var dmJSON = "three.json";
    $.getJSON(dmJSON, function(data) {
        console.log(data)
        $.each(data.records, function(i, f) {
            var table = '<table>';
            table += "<tr><td>" + f.Clue + "</td><td>" + f.Answer + "</td><td>" + f.Status + "</td><td> " + f.Views + "</td></tr>";
            table += "</table>";
            $('.profile').append(table);
        });
    });
});

但是使用多个表格时，更难以正确对齐列，但不确定这是否是您需要的。

演示： http://plnkr.co/edit/ffyaAN41Wlev6jY9OB93?p=preview

Answer 2

这可以帮到你试试这个：

 HTML:
   <html>
     <head>
        <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">   </script>
        <script>

           $(function() { 
              var dmJSON = "three.json";
              $.getJSON( dmJSON, function(data) {
                  $.each(data.records, function(i, f) { 
                     var $table="<table border=1><tbody><tr>" + "<td>" +                                     f.Clue + "</td>" + "<td>" + f.Answer + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.Views + "</td>" + "</tr></tbody></table>"
                     $("#entrydata").append($table)
                    }); 
                 });

               });
                    </script>
                </head> 
              <body> 
               <div class="wrapper">
                 <div class="profile">
                      <div id='entrydata'></div>
                  </div>
                 </div>

                </body>

                 </html>

Answer 3

将JSON数据存储在多个表Demo

中

$(function() {
    var data = {
        "records": [{
            "Clue": "First Clue",
            "Answer": "Answer to the first clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Second Clue",
            "Answer": "Answer to the second clue",
            "Status": "Rejected",
            "Views": "15"
        }, {
            "Clue": "Third Clue",
            "Answer": "Answer to the third clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Fourth Clue",
            "Answer": "Answer to the fourth clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Fifth Clue",
            "Answer": "Answer to the fifth clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Sixth Clue",
            "Answer": "Answer to the sixth clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Seventh Clue",
            "Answer": "Answer to the seventh clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Eigth Clue",
            "Answer": "Answer to the eigth clue",
            "Status": "Rejected",
            "Views": "10"
        }, {
            "Clue": "Nintht Clue",
            "Answer": "Answer to the ninth clue",
            "Status": "Rejected",
            "Views": "10"
        }]
    }
    $.each(data.records, function(i, f) {
        var tblRow = "<table border='1'>" + "<tr>" + "<td>" + f.Clue + "</td>" + "<td>" + f.Answer + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.Views + "</td>" + "</tr>" + "</table>"
        $(tblRow).appendTo("body");
    });
});

如何在每个表

3 个答案: