Question

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

我试图查看其他Stackoverflow线程，似乎有很多类似的问题，但我仍然试图了解jQuery，所以我无法解决如何做到这一点。 / p>

我猜它是因为同一个班级名字？

我的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()

等表单名称访问该值

＆＃13;

$('.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);

});

＆＃13;

<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>

＆＃13;

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

1 个答案: