search
top

How to Add a New Row in a Dynamic Table in JavaScript?

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

In my last post on dynamic table in JavaScript, we had created a dynamic table. I have received many requests to show how to add a new row in the table at runtime. Considering the same table and continuing with the same variables, let us try to add new row in the dynamic table we have already created.

 

As discussed in the previous post, we are managing the row ordering of our data on timestamp i.e. the date and time on which a row is added in the table. Hence, this timestamp is treated as unique id to identify each record uniquely in the table and to refer to each element of the row thereof. So, this is what we do in the function add_row()

var o = {};

o.id = new Date().getTime();

 

o.name = document.getElementById(“txtName”).value;

o.address = document.getElementById(“txtAddress”).value;

o.country = document.getElementById(“txtCountry”).value;

 

document.getElementById(“txtName”).value = ”;

document.getElementById(“txtAddress”).value = ”;

document.getElementById(“txtCountry”).value = ”;

 

m_Grid.push(o);

 

A new row is inserted in the table

 

var tr = document.getElementById(“tbodyData”).insertRow();

 

The id of newly created object is now used to set the row id and to identify each column in that row

 

tr.id = “row_” + o.id + “”

var html = “<td id=’tdName_” + o.id + “‘>” + o.name + “</td><td id=’tdAddress_” + o.id + “‘>” + o.address + “</td><td id=’tdCountry_” + o.id + “‘ >” + o.country + “</td>”;

 

At this stage, we want to display 3 buttons viz. Save, Edit and Delete for newly created row out of which Save button is set not to be displayed. If you remember, we displayed Save button once an edit operation is performed on a particular row and we wish to save the modified data.

 

html += “<td><input id=’btnSave_” + o.id + “‘ type=’button’ style=’display:none;’ value=’Save’ onclick=’save_row(\”” + o.id + “\”)’ />”;

html += “<input id=’btnEdit_” + o.id + “‘ type=’button’ value=’Edit’ onclick=’edit_row(\”” + o.id + “\”)’ />”;

html += “<input id=’btnDelete_” + o.id + “‘ type=’button’ value=’Delete’ onclick=’delete_row(\”” + o.id + “\”)’ /></td>”;

tr.innerHTML = html;

 

I am sure this will work. If you want you also can write function for cancelling the row which you have added without saving the data to table.

4 Responses to “How to Add a New Row in a Dynamic Table in JavaScript?”

  1. Vatter says:

    You covered several good points here. I did a search on the topic and found most people will go along with with your blog.

  2. adida says:

    What an amazing job you are doing teaching other individuals by way of your webpage.

  3. yeezy says:

    I definitely wanted to send a small remark to appreciate you for some of the fantastic guides you are giving out on this site. My rather long internet search has at the end been honored with professional information to go over with my pals. I ‘d declare that most of us site visitors are definitely endowed to dwell in a perfect website with many brilliant people with interesting secrets. I feel very much grateful to have seen your entire web page and look forward to many more excellent minutes reading here. Thank you again for a lot of things.

  4. Very interesting details you have observed, thanks for posting.

Leave a Reply

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

top