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

Question

我正在尝试更新从 MYSQL 查询生成的一些表行（可能有 40-50 行），每行末尾都有一个 Approve/Rejected 列，我想使用 jQuery 来更新行选择下拉菜单，我遇到的问题是它只更新第一行。

我曾尝试查看其他 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>