如何创建多个表并在每个表中存储json数据答案

【问题标题】：How to create multiple tables and store json data in each table如何创建多个表并在每个表中存储json数据
【发布时间】：2015-07-22 20:00:45
【问题描述】：

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）同样在第二个表中我想存储第二个记录。怎么做？对此的任何解决方案将不胜感激。提前致谢

【问题讨论】：

标签： javascript html json

【解决方案1】：

这可能对你有帮助，请试试这个：

 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>

【讨论】：

这也有效！谢谢，但我想要 1 列和 4 行.. 第一行中的第一个值，下一行中的下一个值.. 怎么做？
请将 1 列 4 行的脚本标记替换为：
这是完美的代码。非常感谢您的帮助。

【解决方案2】：

如果您想在单独的表中呈现每条记录，那么最好的办法是动态创建表。比如这样：

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

【讨论】：

嘿！太感谢了。这正是我想要的。非常感谢您立即回答。代码有效。
我想要 1 列和 4 行.. 第一行中的第一个值，下一行中的下一个值.. 怎么做？

【解决方案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");
    });
});

【讨论】：