Aktualisieren von Tabellenzeilen mithilfe von Jquery mithilfe des Dropdown-Menüs

Question

Ich versuche, einige Tabellenzeilen (40-50 Zeilen) aus einer MYSQL-Abfrage mit einer genehmigten/abgelehnten Spalte am Ende jeder Zeile zu aktualisieren Verwenden Sie jQuery, um die Zeile mithilfe eines Auswahl-Dropdown-Menüs zu aktualisieren. Das Problem besteht darin, dass nur die erste Zeile aktualisiert wird.

Ich habe versucht, andere Stackoverflow-Threads zu betrachten, es scheint einige mit ähnlichen Problemen zu geben, aber ich versuche immer noch, meinen Kopf um jQuery zu bekommen, also konnte ich nicht herausfinden, wie es geht.

Ich vermute, es ist wegen der gleichen Klassennamen?

Meine HTML-Tabelle/bildet

<table> 
    <tr> 
     <td>1</td> 
     <td>Ren</td> 
     <td> 
     <form method="post" action="" class="dangermouse"> 
      <div class="form-group"> 
       <select name="approval" class="approval"> 
        <option value="0">Approved</option> 
        <option value="1">Reject</option> 
       </select> 
      </div> 
      <input type="hidden" name="id" value="1"> 
      <input type="button" name="updaterow" class="save_button" value="Update"> 
     </form> 
     </td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Stimpy</td> 
     <td> 
     <form method="post" action="" class="dangermouse"> 
      <div class="form-group"> 
       <select name="approval" class="approval"> 
        <option value="0">Approved</option> 
        <option value="1">Reject</option> 
       </select> 
      </div> 
      <input type="hidden" name="id" value="2"> 
      <input type="button" name="updaterow" class="save_button" value="Update"> 
     </form> 
     </td> 
    </tr> 
</table> 

jQuery:

$('.save_button').click(function() { 
    var approval = $('.approval').val(); 
    var id = $('.id').val(); 

    $('.save_status').text('loading...'); 

    $.post('updateRow.php',{ 
      approval: approval, 
      id: id 
     }, function(data) { 
      $('.save_status').text(data); 
     } 
    ); 
}); 

PHP File:

if(isset($_POST['approval'],$_POST['id'])) { 
$approval = $_POST['approval']; 
$id = $_POST['id']; 
if($approval !="" && $id !="") { 
    $pdo->ApproveOrDeny($approval, $id); 
    } else { 
     echo "The same thing we do every night, Pinky - try to take over the world!"; 
    } 
} 

Vielen Dank im Voraus.

Answer 1

Sie müssen die angeklickt Form Werte des Namens nur mit Klasse

1) Setup-eindeutigen Namen für jedes Formular .instead zugreifen

2) Zugriff auf den Wert Namen Form wie dieses $('form[name="form1"]>.id').val()

$('.save_button').click(function() { 
 

 
    var form = $(this).parents('form:first').attr('name'); 
 
    
 
    alert(form); 
 

 
    var id = $('form[name="'+form+'"]>.id').val(); 
 
    var option =$('form[name="'+form+'"] .approval').val(); 
 

 
    alert(id); 
 
    alert(option); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Ren</td> 
 
     <td> 
 
     <form method="post" name="form1" action="" class="dangermouse"> 
 
      <div class="form-group"> 
 
       <select name="approval" class="approval"> 
 
        <option value="0">Approved</option> 
 
        <option value="1">Reject</option> 
 
       </select> 
 
      </div> 
 
      <input type="hidden" class="id" value="1"> 
 
      <input type="button" name="updaterow" class="save_button" value="Update"> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Stimpy</td> 
 
     <td> 
 
     <form method="post" name="form2" class="dangermouse"> 
 
      <div class="form-group"> 
 
       <select name="approval" class="approval"> 
 
        <option value="0">Approved</option> 
 
        <option value="1">Reject</option> 
 
       </select> 
 
      </div> 
 
      <input type="hidden" class="id" value="2"> 
 
      <input type="button" name="updaterow" class="save_button" value="Update"> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
</table>