Create Dynamic HTML Table from Array data [JQUERY]

/ / 0 Comments

 jQuery Add Dynamic Table with data in Array: Here in this article will explain how to create HTML table dynamically from the Array variable using jQuery. This means the columns, rows, and data get added dynamically to HTML table at runtime using jQuery. You can also check the previous article related jQuery table like  How to remove table row tr in jQuery ,  Remove next row tr from a table in jQuery.

CODE : Here we have a Array variable with some data i.e. bookDetails, which later to be used for binding to the HTML table. We have a simple array where we stored data .i.e some book id, book name and their author.
//*
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"]);
//*

Html Markup:

Add an HTML button tag and a div tag, where div tag will be the parent container of the dynamically generated table.
//*
<button id="btnGenerateTable">Generate Table</button>
<br>
<div id="parentHolder">
</div>
//*

jQuery:

Now here's the main piece of code, where we are going to generate HTML table dynamically with jQuery.
//*
$("#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]);
        }
    }
});
//*
View Demo

This is how we created dynamic HTML table using jQuery.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments

  1. Kiran 01/31/2017 20:15:56
    Hi Satinder, Nice article but as per my requirement I would like to add select button on each row dynamic HTML table. When I click on each button I just want read that data into some variable. Please help me from this one. Thanks for your time and consideration!