javascript - How to create multiple tables and store json data in each table -
html code
<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 data
{ "records": [ { "clue" : "first clue", "answer" : "answer first clue", "status" : "rejected", "views" : "10" }, { "clue" : "second clue", "answer" : "answer second clue", "status" : "rejected", "views" : "15" }, { "clue" : "third clue", "answer" : "answer third clue", "status" : "rejected", "views" : "10" }, { "clue" : "fourth clue", "answer" : "answer fourth clue", "status" : "rejected", "views" : "10" }, { "clue" : "fifth clue", "answer" : "answer fifth clue", "status" : "rejected", "views" : "10" }, { "clue" : "sixth clue", "answer" : "answer sixth clue", "status" : "rejected", "views" : "10" }, { "clue" : "seventh clue", "answer" : "answer seventh clue", "status" : "rejected", "views" : "10" }, { "clue" : "eigth clue", "answer" : "answer eigth clue", "status" : "rejected", "views" : "10" }, { "clue" : "nintht clue", "answer" : "answer ninth clue", "status" : "rejected", "views" : "10" } ] } from above code json data stored in single table. want store each record in different tables.there 8 records want 8 tables 1 record in each. ex: in 1st table want first record stored (i.e first clue, answer first clue, rejected 10) in second table want store second record. how that? solution appreciated. in advance
this may please try :
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>
Comments
Post a Comment