MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

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.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

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:

Listing 1: HTML structure

<html>
<head>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="functions.js"></script>
</head>
<body>
	<button id="btnAddd”>New</button>
	<table id="tblData">			
		<thead>
			<tr>
				<th>Name</th>
				<th>Phone</th>
				<th>Email</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</body>
</html>

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".

Now, we'll create four functions: Add, Delete, Edit and Save. Let us see below each one's code:

Listing 2: Add function

function Add(){
	$("#tblData tbody").append(
		"<tr>"+
		"<td><input type='text'/></td>"+
		"<td><input type='text'/></td>"+
		"<td><input type='text'/></td>"+
		"<td><img src='images/disk.png' class='btnSave'><img src='images/delete.png' class='btnDelete'/></td>"+
		"</tr>");
	
		$(".btnSave").bind("click", Save);		
		$(".btnDelete").bind("click", Delete);
}; 

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.

Listing 3: Save function

function Save(){
	var par = $(this).parent().parent(); //tr
	var tdName = par.children("td:nth-child(1)");
	var tdPhone = par.children("td:nth-child(2)");
	var tdEmail = par.children("td:nth-child(3)");
	var tdButtons = par.children("td:nth-child(4)");

	tdName.html(tdName.children("input[type=text]").val());
	tdPhone.html(tdPhone.children("input[type=text]").val());
	tdEmail.html(tdEmail.children("input[type=text]").val());
	tdButtons.html("<img src='images/delete.png' class='btnDelete'/><img src='images/pencil.png' class='btnEdit'/>");

	$(".btnEdit").bind("click", Edit);
	$(".btnDelete").bind("click", Delete);
}; 

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.

Listing 4: Edit function

function Edit(){
	var par = $(this).parent().parent(); //tr
	var tdName = par.children("td:nth-child(1)");
	var tdPhone = par.children("td:nth-child(2)");
	var tdEmail = par.children("td:nth-child(3)");
	var tdButtons = par.children("td:nth-child(4)");

	tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
	tdPhone.html("<input type='text' id='txtPhone' value='"+tdPhone.html()+"'/>");
	tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
	tdButtons.html("<img src='images/disk.png' class='btnSave'/>");

	$(".btnSave").bind("click", Save);
	$(".btnEdit").bind("click", Edit);
	$(".btnDelete").bind("click", Delete);
};

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.

Listing 5: Delete function

function Delete(){
	var par = $(this).parent().parent(); //tr
	par.remove();
}; 

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:

Listing 6: File functions.js

$(function(){
	//Add, Save, Edit and Delete functions code
	$(".btnEdit").bind("click", Edit);
	$(".btnDelete").bind("click", Delete);
	$("#btnAdd").bind("click", Add);
});
Exemple of execution in the browser

Figura 1: Exemple of execution in the browser

And, this way, we finish our code. It's now only a matter to test and see the results.

For now, that's all. Big hug, see you all later.

See also



Studing Computer Science at UFRN, .NET/C#, delphi developer almost 3 years, having worked with Webservices, WPF, asp.net and Windows Phone 7, also has knowledge in HTML, CSS and Javascript (jQuery).

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
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,00
This 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,00
This 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!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login