The Edit button is not working, Please help how to make the Edit button to edit the values_问答_开发者

The Edit button is not working, Please help how to make the Edit button to edit the values

开发者 https://www.devze.com 2023-01-12 02:14 出处：网络

    <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.

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