JQuery - Выберите TD в базе данных

Question

Здравствуйте I'am Jquery обучения, и у меня есть проблемы с помощью следующего кода:

<table class="table table-bordered table-striped table-hover datatable"> 
     <thead> 
     <tr> 
      <th>ID</th> 
      <th>organisation Name</th> 
      <th>User name</th> 
      <th>Email</th> 
      <th>Contact No</th> 
      <th>IP</th> 
      <th>Date</th> 
      <th>Status</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr> <td>3</td> 
     <td>Harshit </td> 
     <td>AtulSaini</td> 
     <td>arpitkumar@gmail.com</td> 
     <td>7860458</td> 
     <td>::1</td> 
     <td>14/03/2015</td><td><button id="status"><span class="label label-success">Active</span></botton></td></tr> 

     <tr class="warning"> <td>4</td> 
     <td>Meghaa.co.edu</td> 
     <td>megha</td> 
     <td>meghaa.sing@gmail.com</td> 
     <td>7860458</td> 
     <td>::1</td> 
     <td>14/03/2015</td><td><button id="status"><span class="label label-warning">Deactive</span></botton></td> 
     </tr>    

     </tbody> 
    </table> 

Я хочу Jquery решения. Когда я нажимаю кнопку, имеющую id=status, первый td этого перкулята <tr> получает выбранный и отправляется с использованием Ajax. В ответ класс <tr> переключается с предупреждения на успех, а <button> класс span также переключает с label-warning на label-success.

Вот код, который я попробовал:

<script type="text/javascript"> 
$(document).ready(function(){ 
      $("#status").click(function(){ 
       var id=$(this tr).find('td:first').html(); 
       var status=$("span").html(); 
       var xmlhttp; 
      if (window.XMLHttpRequest) 
      {// code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest(); 
      } 
      else 
      {// code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange=function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
        var res=xmlhttp.responseText; 
        alert(res); 
        if(res=="n") 
        { 
         $(this tr).removeClass("success"); 
         $(this tr).addClass("warning");      
        } 
        else{ 
        $(this).parents('tr').removeClass("warning"); 
         $(this).parents('tr').addClass("success"); 
        } 
       } 
      } 
      xmlhttp.open("GET","scripts/update.php?id="+id+"&status="+status,true); 
      xmlhttp.send(); 

      }); 
     });  

Answer 1

$(document).ready(function() { 
    $("#status").click(function() { 
     var id = $(this).children("tr").find('td:first').html(); 
     var status = $("span").html(); 
     $.ajax({ 
      url : "scripts/update.php", 
      type : 'GET', 
      data : { 
       "id" : id, 
       "status" : status 
      }, 
      error : function(xhr, status, error) { 
       alert(error); 
      }, 
      success : function(entry) { 
       var res = entry; 
       alert(res); 
       if (res == "n") { 
        $(this).children("tr").removeClass("success"); 
        $(this).children("tr").addClass("warning"); 
       } else { 
        $(this).parents('tr').removeClass("warning"); 
        $(this).parents('tr').addClass("success"); 
       } 
      } 
     }); 
    }); 
}); 

Попробуйте использовать JQuery AJAX его быстрее и easyer использовать и у вас есть гораздо меньше кода. И от корса вам не нужно заботиться о проблемах с перекрестным браузером. Надеюсь, я могу помочь.

Answer 2

Поскольку вы комментируете мое решение, я понял, что вы действительно хотите сделать с кодом, так что теперь это модифицированная версия, которая должна работать нормально.

$(document).ready(function() { 
    $("#status").click(function() { 
     var status = $("span").html(); 
     $(this).children("tr").each(function() { 
      var id = $(this).find('td:first').html(); 
      $.ajax({ 
       url : "scripts/update.php", 
       type : 'GET', 
       data : { 
        "id" : id, 
        "status" : status 
       }, 
       error : function(xhr, status, error) { 
        alert(error); 
       }, 
       success : function(entry) { 
        var res = entry; 
        alert(res); 
        if (res == "n") { 
         $(this).children("tr").removeClass("success"); 
         $(this).children("tr").addClass("warning"); 
        } else { 
         $(this).parents('tr').removeClass("warning"); 
         $(this).parents('tr').addClass("success"); 
        } 
       } 
      }); 
     }); 
    }); 
}); 

Надеюсь, это то, что вы искали. Иметь хороший день Ганс Петербург

Edit: Может быть, вы должны изправлена ​​объекты для добавления или удаления функцию