Home/ Questions/Q 1005537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:18:45+00:00

<html> <head> <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js></script> <script type=text/javascript> $(document).ready(function(){ $(.pane:even).addClass(alt); $(.pane .btn-delete).click(function(){ alert(This Row will

  • 0
    <html>
    <head>
    <script type="text/javascript"      
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){     
    $(".pane:even").addClass("alt");     
    $(".pane .btn-delete").click(function(){
    alert("This Row will be deleted!");      
    $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
    .animate({ opacity: "hide" }, "slow")
    return false;
    });     
    $(".pane .btn-edit").click(function(){
    alert("Do You Wish To Edit this row!");
    $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
    .animate({ backgroundColor: "#ffffff" }, "slow")
    .removeClass("spam")
    return false;
    });   
    });
    </script>     
    <style type="text/css"> 
    body {
    margin: 10px auto;
    width: 470px;
    }
    a, a:visited {
    color: #000099;
    }
    a:hover {
    text-decoration: none;
    }
    h3 {
    margin: 0;
    padding: 0 0 .3em;
    }
    p {
    margin: 0;
    padding: 0 0 1em;
    }
    .pane {
    background: #ffffff;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 1px #ccc;
    }
    .alt {
    background: #f5f4f4;
    }
    .spam {
    color: #999999;
    }
    </style> 
    </head>      
    <body>     
    <div class="pane"> 
    <h3>Row 1</h3>  
    <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-             edit">edit</a>
     </div> 
     <div class="pane spam"> 
     <h3>Row 2:</h3> 
     <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-Edit">edit</a>
      </div> 
      <div class="pane"> 
      <h3>Row 3:</h3> 
      <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-   Edit">edit</a>
      </div> 
      <div class="pane"> 
      <h3>Row4</h3> 
      <p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-          edit">edit</a>
      </div> 
      </body> 
      </html>

If i want to edit and delete a mysql table can i use the same concepts of buttons.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a few simple javascript errors that you might address and see if that is the problem. For example you are missing a semicolon here:

     $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
  .animate({ opacity: "hide" }, "slow");

    As well as here:

     $(".pane .btn-edit").click(function(){
                alert("Do You Wish To Edit this row!");
  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
  .animate({ backgroundColor: "#ffffff" }, "slow")
  .removeClass("spam");

    Also and most importantly, javascript is CaSe SEnsitivE. You have your edit class named: ‘btn-edit’ AND ‘btn-Edit’. Your jQuery code only references ‘btn-edit’.

    UPDATE:
    After making the suggested updates the code works fine, you can check it out here:

    Example

    • 0