Dynamically create a HTML table with Jquery

Author:Kostas Sp Published On:September 19, 2014 Under:Jquery

 
 

In this post we will show a nice and clear way to create dynamically a table by using
the power of jquery.

The needed HTML is below.In a standard basic form.
 

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Dynamically create table with Jquery</title>
		<link rel="stylesheet" type="text/css" href="main.css" />
		<script src="jquery-1.9.1.js"></script>
		<script src="custom.js"></script>
	</head>
	<body>
 
      <div id="get_details_in_div"></div>
 
 
	</body>
</html>

 

The div that is going to host the table has the id get_details_in_div

 

 
  $(document).ready(function(){ 
 
 
 var tbl = $('<table></table>').attr({ id: "results_items" });
 var row = $('<tr></tr>').attr({ class: ["custom_class1", "class2", "class3"].join(' ') }).appendTo(tbl);
    $('<td></td>').text("First td").appendTo(row);
    $('<td></td>').text("Second td").prepend($('<a></a>').attr({ href: "#" }).text("LINK")).appendTo(row);        
    $('<td></td>').text("third td").appendTo(row); 
 
 tbl.appendTo($("#get_details_in_div")); 
 
});

 

Let’s blend a little of css
 

 
p {
font-style:italic;
background-color:green;
color:red;
}
 
#get_details_in_div tr td
{
border: 1px solid black;
height:50px;
width:50px;
 
}

 

Here you can see the relevant fiddle

     

Leave a Reply

Current day month [email protected] *


2 − = one

.
 
Categories
TEST

Anything in here will be replaced on browsers that support the canvas element

Tags