Dynamically Adding to a Table using JQuery
How do you generate information onto your DOM? Do you hard code it all in? Well.. if you answered yes, you should really think about changing your ways. When hard coding information into your code, you won’t really be able to change up the information on your application. For a friendlier and a more versatile site, you’ll want to dynamically generate information.
Not sure how to do this? Fear not for this post will go through how to go about dynamically adding information onto a table. This is just one of many different ways of dynamically adding to a table.
You’ll need two files, index.html and app.js. You can name these files whatever you like but this is generally best practice.
First you’ll want to create an empty table on your html page. That looks something like the following..
Congratulations! You now have an empty table. You can create a style.css file and add some personal touches to it if you’d like. Again, this file can be named anything but this is generally best practice.
You probably noticed the script tag at the bottom of my snippet. This tag is telling the computer to also read what is in the app.js document. This is where the meat of our code will be.
In app.js you will grab onto data from whichever database you are using and save it as an array of objects with key/value pairs. For this example I’ve hard coded an array of three object (I know, this article is all about not hard coding.. but getting data from a separate database is a whole other ordeal, trust me)
At the bottom of my array you’ll see that I am passing my array to a function. As the name of the function suggests, it will display the information passed on to it when it was called on. Let’s see what this function looks like.
As you can see, we need a for loop in our function to iterate through the array. The array length may change depending on the information you receive from your database, so we use data.length as an indicator of the length of the array.
Next, one of the most important things is to know WHERE you’ll be adding this information to. When creating the empty table, we left the tbody tag empty as a place to put out information, so we will grab onto that using jQuery.
Now that we know where will will be posting, we will want to APPEND new information onto the table. We can also PREPEND, that just depends on your application and how you’d like you data to be displayed. Fir this example we will just append. This means we will add each object one-by-one. We will not be replacing anything, but rather adding to the bottom of the list.
The thing we are appending is a table row, <tr>, and in this table row we are filling in the table data, <td>, in the order it is set up in our html. This is all placed in single quotes so you don’t have to concatenate so much.
${data[i].name} is code that is grabbing the name from the specific object in that array and adding it to table data. These calls are directly correlated to the key: value pairs that are in our array of objects.
Once this code is complete, you may run it and see the magic!
