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
