Create Table Dynamically using Jquery

In this tutorial we will create table dynamically using jquery 1.10. In the below example we are using jQuery.getJSON( url, [data] [success] ) function of jquery to load json encoded data from server using get http request.
ParameterDescription
urlurl is equired and a string containing the url to which the request is sent.
datadata is plainObject or string type and is optional. data is sent to the server with the request
successsuccess is a callback function with additional parameters, that is executed if the request succeeds. It is optional and is of Function( PlainObject data, String textStatus, jqXHR jqXHR ) type.
data contains the data that is returned from the server.
textStatus contains the request status ("success", "notmodified", "error", "timeout", or "parsererror")
jqXHR contains the XMLHttpRequest object.

Example to Create Table Dynamically using Jquery:-

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Create Table Dynamically using Jquery</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
	(function() {
		$(document).ready(function(){
	        $.getJSON("countrycapital.json", function(data){
	            $.each(data, function(i, value){
	                $("#country").append("<tr><td>"+value.CountryName+"</td><td>"+value.CapitalName+"</td><tr>");
	            });
	        });
		});	
	})();
</script>
</head>
<body>
  <div>
  	<table border="1">
  	    <thead>
  	       <tr>
  	          <th>Country</th>
  	          <th>Capital</th>
  	       </tr>
  	    </thead>
  	    <tbody id="country">
  	    </tbody>
  	</table>
  </div>
</body>
</html>

Json file used in above example:-

[
   {
      "CountryName":"Australia",
      "CapitalName":"Canberra"
   },
   {
      "CountryName":"United States",
      "CapitalName":"Washington"
   },
   {
      "CountryName":"France",
      "CapitalName":"Paris"
   },
   {
      "CountryName":"Brazil",
      "CapitalName":"Brasilia"
   },
   {
      "CountryName":"China",
      "CapitalName":"Beijing"
   },
   {
      "CountryName":"North Korea",
      "CapitalName":"Pyongyang"
   },
   {
      "CountryName":"South Korea",
      "CapitalName":"Seoul"
   },
   {
      "CountryName":"South Africa",
      "CapitalName":"Pretoria"
   },
   {
      "CountryName":"India",
      "CapitalName":"New Delhi"
   },
   {
      "CountryName":"Japan",
      "CapitalName":"Tokyo"
   },
   {
      "CountryName":"United Kingdom",
      "CapitalName":"London"
   },
   {
      "CountryName":"Somaliland",
      "CapitalName":"Hargeisa"
   },
   {
      "CountryName":"Algeria",
      "CapitalName":"Algiers"
   },
   {
      "CountryName":"Afghanistan",
      "CapitalName":"Kabul"
   },
   {
      "CountryName":"Argentina",
      "CapitalName":"Buenos Aires"
   }
]

In the exaple we are fetching data from server using the getJson function, which returns json type data in response. after getting response we are just iterating and appending it’s value to table tbody.

output:-
Create Table Dynamically using Jquery

Leave a Comment