search
top

How to Create a Dynamic Table in JavaScript

ShareShare on FacebookShare on Google+Email this to someoneTweet about this on TwitterShare on LinkedIn

 

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:

JS Table

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.

14 Responses to “How to Create a Dynamic Table in JavaScript”

  1. Minni says:

    A big thank you for your blog article. Thanks Again. Awesome.

  2. uquniby says:

    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.

  3. Ruhi says:

    Appreciate you sharing, great blog.

  4. Drum wright says:

    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.

  5. kors says:

    You’re carrying out teaching through your web blog.

  6. dean says:

    It’s very straightforward to find out any topic on web as compared to books, аs І found this article at this web site.

  7. Joesph Slosek says:

    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.

  8. Jubran says:

    I like this post, enjoyed this one appreciate it for putting up.

  9. Vijay Panchani says:

    Gone through this solution, and it worked. Thanks for sharing this useful post.

  10. manisha says:

    Nice post for java script users

  11. Nice Post
    Thanks for Spreading Java Script Knowledge. As it’s helpful for small startups. It’ll be very useful for us.

  12. Nipa Patel says:

    Wonderful blog work JS expert as well as beginner, I will be use this code to create Grid in my project.

  13. Dipesh says:

    Very nice blog.
    Informative.

  14. Charan says:

    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.

Leave a Reply

top