jQuery Select and Delete Multiple Records | Lessoncup Programming Blog

Wednesday, 11 December 2013

jQuery Select and Delete Multiple Records

Hi, in few days back i have posted one lesson on selecting multiple check box's, now i updated it with displaying dynamic records with single delete and multiple deleting by selecting check boxes with beautiful CSS Styles, let's see how will do this and use it in your ACP   (Admin Control Panel)


HTML

connect this file to database, not take the table, or div as u comparable and write the query to fetch the records form database table and loop the records with check box, give a class name to checkbox .ckb, and take one more checkbox out side of loop and keep it inside the first row because our loop is inside the second row, and give a name .ckball, at last take a button to delete the selected elements
<div id="lessoncup">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="chart">
  <tr>
    <td width="10%" height="50" align="center" valign="middle" bgcolor="#666666" class="chart">
      <input type="checkbox" name="ckall" id="ckall" class="ckball"></td>
    <td width="20%" height="50" align="center" valign="middle" bgcolor="#666666" class="head">Name</td>
    <td width="24%" height="50" align="center" valign="middle" bgcolor="#666666" class="head">Gender</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#666666" class="head">Email</td>
    <td width="33%" height="50" align="center" valign="middle" bgcolor="#666666" class="head">Delete</td>
  </tr>
  <?php
  $users=mysql_query('select * from users order by uid limit 8');
  while($full=mysql_fetch_array($users)){
  ?>
  
  <tr>
    <td height="50" align="center" valign="middle" class="chart"><input type="checkbox" name="ck" class="ckb"></td>
    <td height="50" align="center" valign="middle" class="chart"><?php echo $full['username']?></td>
    <td height="50" align="center" valign="middle" class="chart"><?php echo $full['gender']?></td>
    <td height="50" align="center" valign="middle" class="chart"><?php echo $full['email']?></td>
    <td height="50" align="center" valign="middle" class="chart"><a class="sdelete">Delete</a></td>
    
    <?php }?>
  </tr>
  
</table>
<input name="" type="button" value="Delete" id="delete" class="delete">
</div>

CSS

<style>

body{font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#F60; margin:0; padding:0;}

#info{ position:fixed; width:100%; height:20px;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666; top:0; padding:10px; background-color:#F60; color:#FFF; font-size:14px;}

#lessoncup{width:630px;padding:10px; margin:0 auto; margin-top:80px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

table{-webkit-box-shadow: 0 0 8px #666;box-shadow: 0 0 8px #666; background-color:#FFF; border-radius:5px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; color:#666;}

.head{ color:#FFF;}

table tr:hover{background-color:#FFEBD7; cursor:pointer;}

.alldel{border:0; background-color:#060; padding:8px; color:#FFF; cursor:pointer;}

.delete{cursor:pointer; border-radius:5px; background-color:#333; color:#FFF; border:none; padding:10px; margin:10px 0 0 0;-webkit-box-shadow: 0 0 8px #666;box-shadow: 0 0 8px #666;}

.sdelete{cursor:pointer; font-weight:600;}

</style>

PHP

now write the click function on #ckall to check and uncheck the multiple check boxes while clicking on this check box, here use prop() method to make the selection true or false, here i wrote the condition to change the color of selected records with the help of is(:checked) method we can know the checked elements easily, and to change the background color of table rows i just used to parents() method. the parents() method is use to get the children's parent, here the check box is children and parent is table row.

write one more click function on .ckb as a selector to check and uncheck the single element and i just used same condition to change the background color while checking and unchecking

write the click function to delete the single record on .delete as a selector inside the function i just used parents() method to remove the table row

write the click function to delete the multiple checked records, here we must know how many check boxes are checked for that i just used this $(".ckb:checked"); and i used each() method to effect the code to all checked elemtns
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>
  
  $(document).ready(function(){
   
   $('#ckall').click(function(){
    
    $('.ckb').prop("checked",this.checked);
    
    var ckall = $(".ckb:checked").length;
    
    if($('.ckb').is(":checked")){
   
   $('.ckb').parents('tr').css({'background-color':'#ff0'});  
     
    }else{
     
     $('.ckb').parents('tr').css({'background-color':'#fff'}); 
     
    }
    
   });
   
   $('.ckb').click(function(){
    
    $(this).prop("checked",this.checked);
    
    $('#ckall').prop("checked",false);
    
    
    
    if($(this).is(":checked")){
   
   $(this).parents('tr').css({'background-color':'#ff0'});  
     
    }else{
     
     $(this).parents('tr').css({'background-color':'#fff'}); 
     
    }

    
   });
   
   
   $('.sdelete').click(function(){
    
   $(this).parents('tr').fadeOut(function(){
    
   $(this).remove();
    
   });
    
   })
   
   
   $('.delete').click(function(){
    
   var ckall = $(".ckb:checked");
   
   ckall.each(function(){
    
    $(this).parents('tr').fadeOut(function(){
     
     $(this).remove();
     $('#ckall').prop("checked",false);
     
     });
    
   });
   
 
   })
   
   
  });
  
</script>

Live Demo   Download Script

5 comments :

  1. well, that is good, but I dont think this much of code for just this little functionality is ok.

    Instead of swaping color in the tr, just swap a class with it like "select".

    And add this code:


    $(function(){
    $(":checkbox", "table.chart").click(function(){
    var _self = $(this),
    parentTr = _self.parents("tr").first();

    if(_self.is(":checked")){
    parentTr.addClass("selected");
    } else {
    parentTr.removeClass("selected");
    }
    });

    $("#delete").click(function(){
    $("tr.selected", "table.chart").slideUp(function(){
    $(this).remove();
    });
    });
    });

    ReplyDelete
    Replies
    1. also, for inline delete option, you can have these lines as well:

      $(".sdelete", "table.chart").click(function(event){
      $(this).parents("tr").first().slideUp(function(){
      $(this).remove();
      });
      event.preventDefault();
      });

      Delete
    2. yes.. every programmer think and present his own logic i presented this in my style and you did in your style ... what ever we write that should be readable , logically understand the points ... we can found lot of scripts ... but people adopt them based there understand... and thank you Ashish to you Script and spending time on my BLOG...

      Delete
  2. I want to delete this from page as well as database. How can i do this tell me?

    ReplyDelete
  3. @Mohammad Khasim, it' not about the logic, it's about to optimize the code and the flow.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons