Today I am going to tell you how to delete or remove multiple rows from a table using jquery with few lines of code. I hope this tutorial will be really useful in your web projects during handling data’s rendering in table.

Removing multiple rows from a table with jQuery

Removing multiple rows from a table with jQuery

Features

  • Delete single row from a table
  • Delete multiple row from a table with validation
  • Check all & Uncheck all checkboxes using jQuery

Latest Jquery 1.9.1

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Check all & Uncheck all Function in jQuery

function toggleChecked(status) {
  $(".checkbox").each( function() {
  	$(this).attr("checked",status);
  })
}

Delete Single Row from a table with jQuery

$('a.delete_single').on("click", function(event){
		var $this = $(this);
		var c = confirm('Are you sure to delete this message?');
		   if(c) {
			$this.parents('tr').fadeOut(function(){
			$this.remove();
		   });
		}
		return false;
});

Delete Multiple Rows from a table with jQuery

$('.deleteall').on("click", function(event){
	var tb = $(this).attr('title');
	var sel = false;
	var ch = $('#'+tb).find('tbody input[type=checkbox]');
	var c = confirm('Continue delete?');
	if(c) {
	  ch.each(function(){
		 var $this = $(this);
			if($this.is(':checked')) {
			        sel = true;	//set to true if there is/are selected row
				$this.parents('tr').fadeOut(function(){
				$this.remove(); //remove row when animation is finished
				});
			}
	  });
		  if(!sel) alert('No data selected');
	}
	return false;
});

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!
View Demo

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/02/Removing-multiple-rows-from-a-table-with-jQuery.pnghttp://w3lessons.info/wp-content/uploads/2013/02/Removing-multiple-rows-from-a-table-with-jQuery-150x150.pngKarthikeyan Kjqueryjavascript,Jquery,new techniques,tips & tricks
Today I am going to tell you how to delete or remove multiple rows from a table using jquery with few lines of code. I hope this tutorial will be really useful in your web projects during handling data's rendering in table.FeaturesDelete single row from a table Delete multiple row...