Question

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

如果我想编辑和删除mysql表，我可以使用相同的按钮概念。

Answer 1

您可能会遇到一些简单的javascript错误，看看是否存在问题。例如，你在这里缺少一个分号：

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

以及：

 $(".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");

此外，最重要的是，javascript是CaSe SEnsitivE。您的编辑类名为：'btn-edit'和'btn-Edit'。你的jQuery代码只引用'btn-edit'。

<强>更新在进行建议的更新后，代码工作正常，您可以在此处查看：

Example

编辑按钮不起作用，请帮助如何使编辑按钮编辑值

1 个答案: