Create Dynamic HTML Table Using jQuery

 jQuery Add Dynamic Table: Here in this article will explain how to create HTML table dynamically 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 : Create data 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!

Sharing is Sexy:    
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++ ; }



Post Comment


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