Dynamically add and delete html table row on user click using jQuery

December 8, 2011 2:25 am / 10 Comments / eftakhairul

This is very simple javascript function using jQuery library for deleting or adding html table row on user click. Basically, I had to write this functionality for one of my client’s projects. There was a table with some input fields in each row what user can manipulate by inserting data, adding or deleting those rows. So, I made like following picture.

Code is really simple. Consider we have following HTML table with any style sheet.

<table id="options-table">
	<tbody>
		<tr>
			<td>Input-Box-One</td>
			<td>Input-Box-Two</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="text" name="input_box_one[]" /></td>
			<td><input type="text" name="input_box_one[]" /></td>
			<td><input class="del" type="button" value="Delete" /></td>
		</tr>
		<tr>
			<td><input type="text" name="input_box_one[]" /></td>
			<td><input type="text" name="input_box_one[]" /></td>
			<td><input class="add" type="button" value="Add More" /></td>
		</tr>
	</tbody>
</table>

If we want more rows then we have to add new row to the table.

$('.add').live('click',function(){
	$(this).val('Delete');
	$(this).attr('class','del');

	var appendTxt = "<tr><td><input type="text" name="input_box_one[]" /></td><td><input type="text" name="input_box_two[]" /></td><td><input class="add" type="button" value="Add More" /></td></tr>";
	$("tr:last").after(appendTxt);
});

Delete a row from Table.

$('.del').live('click',function(){
	$(this).parent().parent().remove();
});

You can even take look at demo or download sourcecode.

Download Sourcecode

Posted in: Javascript, Tutorials / Tagged: html, javascript, jquery

10 Thoughts on “Dynamically add and delete html table row on user click using jQuery”

Salayhin on December 8, 2011 at 11:53 am said:

alert(“Great Post”);

Reply↓
Syed Abidur Rahman on December 8, 2011 at 11:56 am said:

Very good article!!! Now we can code based on this!!!

Reply↓
Fran on January 5, 2012 at 3:01 am said:

Hi!
Thank you! Thank you! Thank you!

The demo link is not working…!

It is a good tutorial/article.

Thank you!

Reply↓
- eftakhairul on January 5, 2012 at 8:05 am said:
  
  thanks for your comments . Actually something wrong to demo file. I will fix that soon as possible.
  
  Reply↓
kritdeo on March 10, 2012 at 5:07 pm said:

I am a hobistic web designer but still in my early stage of this so i must say Thanks a lot for this very simple and useful article… i was really looking for this…

Reply↓
Mohamed Rafiq on March 22, 2012 at 1:57 pm said:

Really nice tutorial! Thanks a lot for this great post!

Reply↓
Mohamed Rafiq on March 22, 2012 at 1:58 pm said:

Really nice post! Thanks a lot for this great post!

Reply↓
- eftakhairul on March 26, 2012 at 3:11 pm said:
  
  Thanks for comments
  
  Reply↓
Fabiane on June 6, 2012 at 2:54 am said:

really nice article, very impressive. thanks for posting.http://www.maritimasaude.com

Reply↓
- eftakhairul on June 6, 2012 at 10:48 am said:
  
  Thanks .. Keep in touch with my blog ..
  
  Reply↓