Create Dynamic HTML Table from Array data [JQUERY]

 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]);
        }
    }
});
//*
Try it Yourself »

This is how we created dynamic HTML table using jQuery.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!

Share:    
Satinder Singh

Hi all, am Founder and Author of Codepedia.info, also atypical polyglot programmer from Bombay, India. I have a passion to create, solve, and deploy software applications.
       ForEach ( minute in MyLife ) { myExperience++ ; }


2 comments on “Create Dynamic HTML Table from Array data [JQUERY]”

  1. Kiran

    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!


Post Comment


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