编辑按钮不工作，请帮助如何使编辑按钮来编辑值

问题描述：

<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表，我可以使用相同的按钮的概念。编辑按钮不工作，请帮助如何使编辑按钮来编辑值

现在我做了格式化。检查出来。编辑按钮不工作。如何使其工作。我也应该如何设计一个JQuery的显示MySQL表。 – Gladiator 2010-08-19 17:55:13

@Galdiator，请参阅下面的答案和示例页面 - 它修复了您发布的问题。 – 2010-08-19 18:13:01

答

你有几个简单的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是区分大小写的。你有你的编辑类命名为：'btn-edit'和'btn-Edit'。你的jQuery代码只引用'btn-edit'。

UPDATE： 制作后，建议更新代码工作正常，你可以看看这里：

Example

其实它被删除我需要编辑H3里面的值 – Gladiator 2010-08-19 18:29:58

请问如何编辑？你可以给你的邮件ID吗？我可以来聊天，并问你一些疑问 – Gladiator 2010-08-19 18:33:03

你需要创建一个表单，你淡入来编辑值，然后更新html。如果你能更清楚你正在寻找什么，我可能会帮助更多。 – 2010-08-19 18:43:58

编辑按钮不工作，请帮助如何使编辑按钮来编辑值

相关推荐