views:

47

answers:

1
    <html>
    <head>
    <script type="text/javascript"      
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
    <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.

+2  A: 

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

resonantmedia
Avtually its get deleted I need to edit the values inside the H3
Gladiator
Can you please say how to edit? Can u give your mailid. can I come to chat and ask you some doubts
Gladiator
You need to create a form that you fade in to edit the value, and then update the html. If you can be more clear about what you are looking for I might be able to help more.
resonantmedia
1.I have a mysql table2.I have the program for CRUD in java3.I want to Display the CRUD using DWR so tat page doesnt reload and oly the value changes.How can i do this.
Gladiator