Please support us by disabling ad blocker for smarttutorials.net ...

Dynamically Add or Remove Table Row Using jQuery

Posted by & filed under CSS, HTML5, JQUERY.

Dynamically Add or Remove Table Row Using jQuery is very helpful in number of places where teachers wants to update students marks details or admin wants to update their Users details. This is very simple to make it yourself just follow this tutorial step by step. If you came across any difficulty implementing this just leave your comments in the comment box.

Dynamically Add or Remove Table Row Using jQuery

Demo

jquery add remove table row dynamically with checkbox functionality

Dynamically Add or Remove Table Row Using jQuery

Step 1:

Create index.php file with following html skelton structure.

<!DOCTYPE html> 
<html>
<head>
	<title>jquery add remove table row dynamically with checkbox functionality</title>
	<meta charset='utf-8'>
</head>
<body>
</body>
</html>

 

Dynamically Add or Remove Table Row Using jQuery

Download

Step 2:

Now add a html form in the body section, and inside form create a table like in the below html.

<form id='students' method='post' name='students' action='index.php'>

		<table border="1" cellspacing="0">
		  <tr>
			<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
			<th>S. No</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Tamil</th>
			<th>English</th>
			<th>Computer</th>
			<th>Total</th>
		  </tr>
		  <tr>
			<td><input type='checkbox' class='case'/></td>
			<td>1.</td>
			<td><input type='text' id='first_name' name='first_name[]'/></td>
			<td><input type='text' id='last_name' name='last_name[]'/></td>
			<td><input type='text' id='tamil' name='tamil[]'/></td>
			<td><input type='text' id='english' name='english[]'/> </td>
			<td><input type='text' id='computer' name='computer[]'/></td>
			<td><input type='text' id='total' name='total[]'/> </td>
		  </tr>
		</table>

		<button type="button" class='delete'>- Delete</button>
		<button type="button" class='addmore'>+ Add More</button>
		<p>
		<input type='submit' name='submit' value='submit' class='but'/></p>
	</form>

Step 3:

Now add the following CSS stylling in the head section of the index.php file.

<style>
	@font-face{font-family: Lobster;src: url('Lobster.otf');}
	h1{font-family: Lobster;text-align:center;}
	table{border-collapse:collapse;border-radius:25px;width:880px;}
	table, td, th{border:1px solid #00BB64;}
	tr,input{height:30px;border:1px solid #fff;}
	input{text-align:center;}
	input:focus{border:1px solid yellow;} 
	.space{margin-bottom: 2px;}
	#container{margin-left:210px;}
	.but{width:270px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;margin:0px 0px 0px 290px;}
</style>

Step 4:

Now add jQuery library file in the head section or bottom of html file wherever you like.

<script src='jquery-1.9.1.min.js'></script>

Step 5:

Here is the jQuery script that will add/append new table row when user clicked on addMore button.

<script>
var i=2;
$(".addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
    data +="<td><input type='text' id='first_name"+i+"' name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"' name='last_name[]'/></td><td><input type='text' id='tamil"+i+"' name='tamil[]'/></td><td><input type='text' id='english"+i+"' name='english[]'/></td><td><input type='text' id='computer"+i+"' name='computer[]'/></td><td><input type='text' id='total"+i+"' name='total[]'/></td></tr>";
	$('table').append(data);
	i++;
});
</script>

Step 6:

Following jQuery script will deletes/removes the selected table rows from the table when user clicked on Delete button. When clicked on delete button following script will check for slected table rows and finally deletes the selected table rows.

<script>
$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();

});
</script>

Step 7:

Following jQuery script helps you to select all the table rows in the table.

<script>
function select_all() {
	$('input[class=case]:checkbox').each(function(){ 
		if($('input[class=check_all]:checkbox:checked').length == 0){ 
			$(this).prop("checked", false); 
		} else {
			$(this).prop("checked", true); 
		} 
	});
}

</script>

Feel free to refer one of my previous tutorial on Dynamically Add and Remove Textbox Using jQuery..

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • How to validate the dynamically added fields?

    I am using formvalidation plugin (formvalidation.io). Can you guide me how to do validation of the new dynamically added fields. Thanks.

  • amit mehta

    muni kindly help in connectting your dynamic rows with database.i want all dynamic rows stored their values in one row in mysql database.

  • Hazeem Sazaly

    how to get the data from the generated table to php?

Get Instant Script Download Access!