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

Add Remove Table Rows Dynamically Using jQuery

Posted by & filed under CSS, HTML5, JQUERY.

This is upgrade to the my previous tutorial on Dynamically Add or Remove Table Row Using jQuery. I had added two more functionality that I missed in the previous tutorial.

That two functionality are

1. When we delete table rows, the row numbers will be automatically updated in the ascending order from one to upto the number available rows.

2. When we do mass delete, the checkbox we checked to select all the rows to be unchecked once we done deletion.

 

 

Add Remove Table Rows Dynamically using jQuery

Add Remove Table Rows Dynamically using jQuery

 

Before continuing this tutorial please refer my previous tutorial on Dynamically Add or Remove Table Row Using jQuery for basics. I  am going to explain in this tutorial only that two functionality.

 

 

Here is the html and jQuery part script.

<h1>Add Remove Table Rows Dynamically using jQuery</h1>
<div id='container'>
<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><span id='snum'>1.</span></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>
</div>
<script>
$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false); 
	check();

});
var i=2;
$(".addmore").on('click',function(){
	count=$('table tr').length;
    var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></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++;
});

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); 
		} 
	});
}

function check(){
	obj=$('table tr').find('span');
	$.each( obj, function( key, value ) {
	id=value.id;
	$('#'+id).html(key+1);
	});
	}

</script>

 

Following lines of script will fetch number of present table rows after we did some dynamic deletion of table rows, and it will add rearrange dynamically all the table row numbers in the ascending order.

obj=$('table tr').find('span');
	$.each( obj, function( key, value ) {
	id=value.id;
	$('#'+id).html(key+1);
	});

Where .find() function will select all the span tags in the table rows , and $.each() function will iterate through each span tag and assign row numbers dynamically in the ascending order.

Following lines of script will do mass deletion of table rows and uncheck the checkbox after the mass deletion.

$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false); 
	check();

});

 

 

 

 .

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.

  • Alex

    How can I write these rows in a mysql database?

  • muni

    When u submit a form, you will get data in array format. then using for or foreach insert those data in Database.

    Regards,

    muni

  • chandrasekhar pachari

    Hi how to add dropdown which displays data from mysql

  • You need to form HTML markup from the results, you are getting from database. Finally append it to the DOM

  • Jan

    Hi i need to Adding a row to a table dynamically inside another table like this https://forum.jquery.com/topic/adding-a-row-to-a-table-dynamically-inside-another-table.

  • sadique anwar

    i need code to add form data in a table of another page after submitting the form

Get Instant Script Download Access!