How to delete multiple rows from a table with jQuery?

Today I am going to tell you how to delete multiple rows from table with 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. Deleting single row in table is painful when you have more rows, this simple jquery code will able to help deleting multiple rows from html table.

Delete multiple rows from table with jQuery
Removing multiple rows from a table with jQuery

Contents

Features

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

Step 1: Install Latest JQuery Code

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

Step 2: Code to 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;
});

Step 3: Code to Delete Multiple Rows from 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!

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

4 thoughts on “How to delete multiple rows from a table with jQuery?”

  1. global $wpdb;
    $mdebug=1;
    $server=”localhost”;
    $username=””;
    $password=””;
    $db=”lab_test”;
    $random_n=rand(0,10000);
    $lab_test= new wpdb($server, $username, $password, $db);
    if($lab_test==null)
    echo “Failed!”;
    else
    {

    delete ($lab_test,$mdebug, $random_n);
    select_display_withdeletebutton($lab_test, $mdebug, $random_n);}
    function delete_form($lab_test, $random_n, $ssn, $mdebug){

    $site_url=get_site_url();
    $actionPage=”$site_url/delete-data-form-employee”;
    echo “”;
    echo “”;
    echo “”;
    echo ” Delete
    “;

    echo “”;}
    function delete ($lab_test, $mdebug, $random_n){
    global $wpdb;
    $form_random_n=$_POST[“random_n”];
    if ($form_random_n!=null && $form_random_n!=$random_n)

    {

    $ssn=$_POST[“ssn”];
    $qstr=”DELETE from employee where ssn=$ssn”;
    echo “$qstr”;
    $lab_test->query($qstr);
    }}
    function select_display_withdeletebutton($lab_test, $mdebug, $random_n)
    {

    $qstr=”select * from employee order by fname”;
    $rows= $lab_test->get_results($qstr);
    if ($rows==null)
    echo “No record Found “;
    else {

    $field_num=4;
    $field_names=array (‘fname’, ‘lname’, ‘bdate’, ‘ssn’);
    $display_names=array (‘fname’, ‘lname’, ‘bdate’, ‘ssn’);
    echo “<table border=1″;
    for ($i=0;$i<$field_num;$i++)
    echo "$display_names[$i]”;
    echo “Delete”;
    echo “”;
    {
    foreach($rows as $row){
    echo “”;
    for ($i=0;$i$field_name;
    echo “$field_data”;

    }
    echo “”;
    delete_form($lab_test, $random_n, $row->ssn);
    echo “”;
    echo “”;}}
    echo “”;
    }

    Reply

Leave a Comment