Add Remove Table Rows Dynamically Using jQuery

Posted 6:19 pm by muni & 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

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

});

 .