Codepedia
.info
Home
About
Demos
Tools
SVG Wave Generator
Colors
Edit This Code :
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <button id="btnGenerateTable">Generate Table</button> <br /> <div id="parentHolder"></div> <script> $(document).ready(function(){ var bookDetails = []; bookDetails.push(["Book Id", "Book Title", "Author"]); bookDetails.push(["1", "Mein Kampf ", "Adolf Hitler"]); bookDetails.push(["2", "Relativity: The Special and the General Theory", "Albert Einstein"]); bookDetails.push(["3", "Think and Grow Rich", "Napoleon Hill"]); bookDetails.push(["4", "The Art of Public Speaking", "Dale Carnegie"]); bookDetails.push(["5", "Tales of Secret Egypt", "Sax Rohmer"]); bookDetails.push(["6", "The Fakir", "BHARUCHA"]); bookDetails.push(["7", "Code Name God", " Mani Bhaumick"]); $("#btnGenerateTable").on('click', function (e) { e.preventDefault(); var parentDiv = $("#parentHolder"); parentDiv.html(""); var aTable = $("<table>", { "id": "newTable" }).appendTo(parentDiv); var rowCount = bookDetails.length; var colmCount = bookDetails[0].length; // For loop for adding header .i.e th to our table for (var k = 0; k < 1; k++) { var fragTrow = $("<tr>", { "class": "trClass" }).appendTo(aTable); for (var j = 0; j < colmCount; j++) { $("<th>", { "class": "thClass" }).prependTo(fragTrow).html(bookDetails[k][j]); } } //For loop for adding data .i.e td with data to our dynamic generated table for (var i = 1; i < rowCount; i < i++) { var fragTrow = $("<tr>", { "class": "trClass" }).appendTo(aTable); for (var j = 0; j < colmCount; j++) { $("<td>", { "class": "tdClass" }).appendTo(fragTrow).html(bookDetails[i][j]); } } }); }); </script>
➤ Run / View
Result :