How to Create a Dynamic Table in JavaScript
JavaScript is a dynamic programming language which can be applied to HTML documents to improve interactive behavior of websites. Dynamic tables created using JavaScript lets you organize your data in rows and columns which makes it easy to access and store the data.
Let us see how to create a dynamic table using JavaScript. I have written HTML code to design a table which looks this:
Assuming that you can design such a table in HTML, let us start with discussion on JavaScript. Because this is going to be a dynamic table, it is good idea to declare a variable m_Grid to hold the values of table initially empty. If you already have some records to be displayed in the table, these are to be pushed in the grid when the page loads.
So, it’s a good practice to write a function onPageLoad()
m_Grid.push({ id: new Date().getTime(), name: “Andy”, address: ‘New York’, country: ‘USA’ });
m_Grid.push({ id: new Date().getTime(), name: “Shawn”, address: ‘Berlin’, country: ‘Germany’ });
m_Grid.push({ id: new Date().getTime(), name: “Rahul”, address: ‘Ahmedabad’, country: ‘India’ });
A unique id is assigned to each row based on its timestamp. This will allow us to maintain ordering and index even after deleting some rows randomly from the table.
Note: Timestamp works exactly like a primary key. It is unique and works well in your live database.
Since, the table preserves row ordering, unique id of the changing row is passed as an argument to fetch the required row in functions edit_row, save_row and delete_row. Let’s consider these operations in the above table.
Edit Operation
Suppose Andy has moved from New York to New Jersey. On clicking edit button corresponding button to Andy’s record, two things should happen:
1. Text boxes should appear in respective row allowing the user to edit existing values
var rec = getRecordById(id);
document.getElementById(“tdName_” + id).innerHTML = “<input type=’text’ id=’txtName_” + id + “‘ value='” + rec.name + “‘>”;
document.getElementById(“tdAddress_” + id).innerHTML = “<input type=’text’ id=’txtAddress_” + id + “‘ value='” + rec.address + “‘>”;
document.getElementById(“tdCountry_” + id).innerHTML = “<input type=’text’ id=’txtCountry_” + id + “‘ value='” + rec.country + “‘>”;
2. Edit button should be replaced by Save button so that new values can be saved in the database
document.getElementById(“btnSave_” + id).style.display = “inline”;
document.getElementById(“btnEdit_” + id).style.display = “none”;
Once the data is edited, it is saved in the live database by calling save_row function with row id as an argument
var rec = getRecordById(id);
rec.name = document.getElementById(“txtName_” + id).value;
rec.address = document.getElementById(“txtAddress_” + id).value;
rec.country = document.getElementById(“txtCountry_” + id).value;
document.getElementById(“tdName_” + id).innerHTML = rec.name;
document.getElementById(“tdAddress_” + id).innerHTML = rec.address;
document.getElementById(“tdCountry_” + id).innerHTML = rec.country;
The display of Edit and Save buttons are again changed for subsequent operations.
document.getElementById(“btnSave_” + id).style.display = “none”;
document.getElementById(“btnEdit_” + id).style.display = “inline”;
Delete Operation
To delete a record from table, you have to first locate the desired record right from the first record in table.
for (var i = 0; i < m_Grid.length; i++) {
if (m_Grid[i].id == id) {
m_Grid.splice(i, 1);
break; } }
The splice() method here is used to remove 1 item from the ith row of table where a match is found. The row ordering is preserved even after deleting any record from the table. This will remove data from your database also.
Now, at this juncture, I think you would be able to add a new row in this table yourself.
Really enjoyed this post.
A big thank you for your blog article. Thanks Again. Awesome.
I want to get across my appreciation for your kind-heartedness in support of those who actually need guidance on in this matter. Your very own dedication appears to be rather informative.
Appreciate you sharing, great blog.
I simply want to mention I am new to weblog and seriously liked your web blog. Almost certainly I’m want to bookmark your blog post . You actually have fabulous writings. Appreciate it for revealing your webpage.
You’re carrying out teaching through your web blog.
It’s very straightforward to find out any topic on web as compared to books, аs І found this article at this web site.
This is my first comment here so I just wanted to give a quick shout out and tell you I truly enjoy reading through your blog posts.
I like this post, enjoyed this one appreciate it for putting up.
Gone through this solution, and it worked. Thanks for sharing this useful post.
Nice post for java script users
Nice Post
Thanks for Spreading Java Script Knowledge. As it’s helpful for small startups. It’ll be very useful for us.
Wonderful blog work JS expert as well as beginner, I will be use this code to create Grid in my project.
Very nice blog.
Informative.
Very informative seems that the day will be successful. Thank you for providing such good knowledge. We generally create table in html but thank you for writing this blog using java script. Thanks a lot.