How to add, edit and delete rows of a HTML table with jQuery

See in this article how to create functionalities of addition, edition and exclusion of registers in a HTML table.

Let's assume the existence of a simple HTML table, that lists a cadastration of clients with three columns: Name, Telephone and E-mail. We wish to add functionalities to do addition, edition and exclusion of lines of this table.To do so, we'll use JavaScript, more specifically, we'll make use of the library jQuery to manipulate the events and functions that will be created.

It is worthy to remember that the focus of this article is not the way this data will be stored, we shall treat only the information in the HTML table. As a suggestion, there's another article, in which it's explained how to store data in the HTML 5 Local Storage.

So, let's start working. To begin with, we'll add one more column to the table, in which there'll be the buttons of action (Save, Edit, Delete) and a button outside the table. This one will be responsible to start the addition of a new register. Lets observe the HTML structure:

The structure is fearsome simple, basically a button and a table. It have been added two links to two JavaScript files: the first one is the jQuery library itself (that may be found online, but in this case it was used a file obtained in the official webpage). The second one is a file that we'll create, in which will be the functions that'll give functionalities to the elements of the "clients cadastration".

The Add function creates a new row in the table, in which each one of the first columns contains a field of text to the entrance of data and the last column contains two images that'll work as buttons of action Save and Delete/Cancel. After adding the row with the fields for entrance of data, we'll link the event onClick of the buttons of action to two different functions that are written short below.

Initially, this function localizes the parent element of the element that contains the button Save, in other words, the TR element the contain the TD in which is the IMG. Knowing the line of the table that is on editing, we localize individually each one of the cells, finding them by their index with which they appear on the line. It all have been done, we shall update the content of each cell, passing to them the value of the field of text contained on them. With that, we finalize the register insertion. At the end, we'll update the functions of the button Edit and Delete. This is required because new elements are not referenced, so it is necessary to "force" the reference.

The Edit function works in a similar way, in certain parts, as the other two. Initially it is localized each cell individually of the line that contains the button that activated the function. Having control upon these elements, we'll add to each cell a field of text (<input type=’text’>) which initial content (value property) is the text that is in the cell. Lastly, once more we update the functions of the buttons.

That is, visually, the most simple function of our code. It's functioning resumes to identify the TR element that contains the button that activated the function and remove it from it's parent element, in other words, the TBODY of the table.

Now that we already know the functions to be used, lasts only to initialize the buttons events, linking them to the defined functionalities. All of this code is put into the main function that's executed in the moment that the site is loaded. According to the jQuery syntax, our file funções.js should have the following structure:

Theo Tutsme
Hi Joel,
why does the edit function also bind a click event to the Delete button and the same for Edit? I only see a Save button added in the function.
And why does listing 6 not contain an invocation of the Save function?
I am relatively new to jQuery so I'd appreciate it if you could explain these 2 issues more fully.
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Theo. Here is the answers:
1) You can remove the lines 14 and 15 of the listing 4 (these bindings is not necessary). As you said, we just need to bind the click event of the save button that is created. Thank you for the advice.
2) We don't need to use the Save function at the listing 6 because when the page loads, there is no save button visible. The save button only appears when we click the add or edit buttons. However, if the table contains lines, there will be edit and delete buttons visible.
Best regards.
11/12/2013 10:22am
Answer it

SAT
Very cool! A very big jump in what I need to accomplish. Abraço tuga.
[+1 year ago]
Answer it

[author]Joel Rodrigues
Thank you for the comment.
Best regards.11/20/2013 9:32am
Answer it

kam
Hi, Do you have the same project but you are using php and database mysql ? if yes thank you very much if you will post it
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, kam.
Sorry, but I do not have this project using MySQL and PHP, just with pure HTML and JavaScript, that can be used with any server-side language that accept this integration.
1/21/2014 2:5pm
Answer it

Tejas Patadia
hey, very nice example ..How to create rows which included Dropdown list ant text boxes. and now how i can store thats values in database when i add more than one rows at runtime???
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Tejas. How are you?
To insert dropdowns, you can do the same way we have done to insert inputs, just changing the tag <input> to <select> and adding the options.
To save the data, you can send it via Ajax to a server page (like PHP, ASP.NET, Java, etc) using jQuery.
Thank you for your comment.3/28/2014 2:6pm
Answer it

Max
good job. find it very useful. thank you very much.
but i am having some problems with the webpage. the btnAdd is not working after i added a submit button with a form. any idea how to solve it? thanks in advance.
[+1 year ago]
Answer it

Mr.Bool Editor
It happens because in this case you need to use button and not submit button.4/2/2014 10:33am
Answer it

clarion
Cool, thanks a lot.
How can we save the value into database?
Thanks in advance
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Clarion. Thanks for the comment.
You can send the data to a server page (PHP, ASP.NET, Java, etc.) using Ajax (using jQuery functions like $.ajax). 4/16/2014 7:34am
Answer it

Giri Babu B
hello Joel,
i was trying to do the same using some back end db, but luckily i found this.
Thank you very much :)
- Giri
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Giri.
Thank you for the comment. I'm happy to know it helped you.5/8/2014 8:33am
Answer it

Jorge Fomperosa
and, if you have a file funciones.js with table operations, how i can use BD with this file?.
my app its in asp
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Jorge.
You will need to submit the row data to a ASP page via Ajax, using jQuery. Take a look at the jQuery API Documentation to learn how to use Ajax functions.
5/12/2014 2:0pm
Answer it

mANiRam Guragain
Hello, i cannot do like you. may i download the source? plz inbox me
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hello, mANiRam.
You can download the sourece code at the top of the page.5/27/2014 8:59am
Answer it

CHARMANNE PANTALEON
hope that there's a back button once you click the edit icon.6/3/2014 3:18am
Answer it

Gary Jahns
Great code Joel, works really well. I would like to replace the email text field with a file input, and have the saved table entry be a link to the selected file. I got as far as changing the input type to "file" to put a choose file button in that cell but am not sure how to get the FileReader object in the context of your code. Any suggestions would be appreciated. Thanks!!
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Gary. Thank you for your comment.
To upload a file you will need a back-end language, right? Maybe you can submit the data using jQuery and receive a answer with the link to the uploaded file.6/10/2014 9:37am
Answer it

ryan wla
The table doesn't save the data I input, even if I click save. When I refresh the page, it's gone and back to the default info. How can I fix this?
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Ryan. In this article we are not using any server-side language to receive and save the data. The main goal of this article is to show a option to perform these operations in a HTML table using jQuery. It can be adapted to send the data via Ajax to any server-side language.6/23/2014 8:26am
Answer it

Ori Tamás
PLS write the right code to save to html table on server. i'am a new guy and i don't even know how can i do this.7/18/2014 6:4pm
Answer it

[author]Joel Rodrigues
Hi, Ori. As I said above, In this article we are not using any server-side language to receive and save the data. Hut I will try to write a new article to Talk about it. Maybe I will use ASP.net MVC or PHP.
Thank you for reading. 7/18/2014 9:43pm
Answer it

Kavan
This is great code Joel! Thank you so much.
In my code I was trying to make an alteration by adding a cancel button next to the disk save icon in the editing mode - just in case the user decides to discard all the changes made. Could you guide me to a possible solution to making this work
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Kavan. Thank you for the comment.
When the user clicks on the edit button, you can store the original field values into variables and if the user clicks on cancel button, you put these original values on the inputs again.
Try it and let me know if you made it.8/1/2014 2:5pm
Answer it

Prashant Vishnoi
After clicking on Edit,Save,Delete, each function is calling as many time as there are the rows in table.It is creating problem while i am validating row.
It must be only for the particular row.
[+1 month ago]
Answer it

[author]Joel Rodrigues
Hi! I didn't understand what is your problem. Can you explain wich function is called for all rows instead of just one?11/11/2014 7:40am
Answer it

Prashant Vishnoi
If I click on save button.. only the particular row is affecting but function call occurs for all the row..
Similar for other functions Edit and Delete..11/11/2014 12:5am
Answer it

[author]Joel Rodrigues
Sorry, butI still don't understand the problem. Let's use the Delete function to ilustrate de problem, because it is the simplest function, ok?
When you click on delete button, the function Delete is called and removes the row where the button was, right? What happens after that in you code?11/11/2014 12:34am
Answer it

Nixy
Hi,
Very nice. One inquiry: Is there a way to submit the data in the rows as vectors after they are saved using a submit button? How can be done?
Thanks,
Nixy N.
[+1 year ago]
Answer it

[author]Joel Rodrigues
Hi, Nixy. You can read all columns of the current row, create an array and use it as you need. Try to use the jQuery each() function to read all row cells.9/11/2013 10:50am
Answer it

Laurens
Certainly, this being a frontend function, have a look at json encoding and ajax async-potsback functions.12/12/2014 8:18am
Answer it

ABHISHEK
Thanks man.. you have no idea how much u helped me..!!
Leave me a message if u're ever in Mumbai, India.. Lemme buy u a beer :)
[+1 month ago]
Answer it

[author]Joel Rodrigues
Hi, ABHISHEK.
Thank you for your comment. I am so happy tobknow that my article has helped you. And be sure that I Will message you when I go to Munbai. Let's drink that beer.
Hugs.1/6/2015 2:25pm
Answer it

Samuel Drew
Is there a way to have more than one of these on a page. The JS file is ignoring the ID and adding to the last table in the code. Is there something I need to add?
[+1 month ago]
Answer it

[author]Joel Rodrigues
Hi, Samuel
You van not have two elements with The same ID, ao you need to change The aproach to use classes instead of IDs, identifying wich table is calling The functions. You can use The parent() function to get The parent of some elements. Try it.
Regards.3/18/2015 4:20pm
Answer it

Samuel Drew
I used different IDs for each table; it's just that everything was being applied to the last table in the source code. I was able to figure it out with the help of a programmer friend.3/18/2015 4:51pm
Answer it

afotey
How do you add a cancel button to the edit row?
Duplicating the "Delete" button actually deletes the row. I just want to cancel out of the row edit while discarding any changes made to any fields in the row...
[+1 month ago]
Answer it

[author]Joel Rodrigues
Hi.
When clicking in the Edit button, save the content of the inputs in global variables. Then, if the user clicks the Cancel button, you restore the original value to the cells.
4/2/2015 4:17pm
Answer it

afotey
Apologies for asking so many questions...how do you do this? I am not entirely sure how to do this. Can you point me in the right direction?4/2/2015 4:30pm
Answer it

[author]Joel Rodrigues
Take a look at the Listing 4. We create the inputs (lines 8 to 11) and set its values with the original content of the cells (tdName.html(), tdPhone.html(), etc.).
So you can create global (not local) variables to save the original content of the cells, like thi:
originalName = tdName.html();
Then, in the click of the Cancel button you restore the original values, doing like the save button:
tdName.html(originalName);
Regards.4/2/2015 4:45pm
Answer it

Alfred
Joel, you know what you are talking about. I really enjoyed this. My problem is how to marry it with PHP. I have a PHP and HTML doing a simple table but I want to be able to edit it and update the info just like you did here. Any help
[+1 month ago]
Answer it

[author]Joel Rodrigues
Hi, Alfred. Good to know that you liked this article.
To use it with PHP or any other server language you can send the data by using Ajax to the back-end page with the POST method. In the Edit, Sabe and Delete functions you can take the value of the fields and send it as a JSON object to your PHP page using jQuery post() function.
Try it and ler me know the results.
Regards.4/29/2015 11:40am
Answer it

Theo Tutsme
Hello Joel,
could you add a download of the source files to this article. I have used copy/paste to create the two files with your code but nothing happens when I click on the 'new' button. (by the way: the id 'btnAddd' in the HTML structure has one 'd' to many; also the double closing quotation mark directly behind this id label is not a correct straight double quotation mark).
Regards, Theo
[+1 year ago]
Answer it

Joel Rodrigues
Hello, Theo.
<br>The source code is now available for download at the top of the page.
<br>Regards.11/11/2013 3:52pm
Answer it

Theo Tutsme
Thanks Joel,
saw that the source files were added later today. They work like a charm!!11/11/2013 3:52pm
Answer it

To have full access to this post (or download the associated files) you must have MrBool Credits.

See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video.Subscribe for this package!