Sample code: Using jQuery to push array elements into an HTML table

The sample code shows how to use jQuery to push the elements inside a 2D array into an HTML table. If you are not familiar with jQuery, click here to find out more about the jQuery library.

Note that the code below links to the jQuery 2.1.0 library which is hosted on the jQuery website. You can download this file and store it locally or upload it to your own site so that you don’t have to hot-link to the jQuery website.

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Putting JS array elements into a table using jQuery</title>
 
 <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
 <script type='text/javascript'>
 $(window).load(function(){
 var itemsArray = [];
 itemsArray[0] = ["a","b","c"];
 itemsArray[1] = ["d","e","f"];
 itemsArray[2] = ["g","h","i"];
 itemsArray[3] = ["j","k","l"];
 itemsArray[4] = ["m","n","o"];
 itemsArray[5] = ["p","q","r"];
 itemsArray[6] = ["s","t","u"];
 itemsArray[7] = ["v","w","x"];
 itemsArray[8] = ["y","z",];
 
 var table = $('#myTable');
 var row, cell;
 for(var i=0; i<itemsArray.length; i++){
 row = $( '<tr />' );
 table.append( row );
 for(var j=0; j<itemsArray[i].length; j++){
 cell = $('<td>'+itemsArray[i][j]+'</td>')
 row.append( cell );
 }
 }
 
 });
 
</script>
 
 
</head>
<body>
 <table id="myTable">
</table>
 
</body>
 
 
</html>

This will be the result of the code above:

Screen Shot 2015-03-21 at 11.31.11 am