Кнопка Edit не работает, помогите пожалуйста как сделать кнопку Edit для редактирования значений - PullRequest
0 голосов
/ 19 августа 2010
    <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, могу ли я использовать те же понятия кнопок.

1 Ответ

2 голосов
/ 19 августа 2010

У вас есть несколько простых ошибок 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».

ОБНОВЛЕНИЕ: После внесения предложенных обновлений код работает нормально, вы можете проверить его здесь:

Пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...