使用选择下拉列表使用Jquery更新表行

Question

我想更新一些表行（可以有40-50行）从MYSQL查询生成每行结束时批准/拒绝列，我想使用jQuery使用select下拉菜单更新行，我遇到的问题是它只更新第一行。

我试图看看其他Stackoverflow线程，似乎有相当多的类似问题，但我仍然试图让我的头绕过jQuery，所以我不能解决如何做到这一点。

我猜这是因为相同的类名？

我的HTML表/形成

<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文件：

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!"; 
    } 
} 

在此先感谢。

Answer 1

您需要访问。相反只是用类名

1）设置唯一的名称的点击形式值为每个表单

2）使用表单名称这样$('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>