PHP表格每行编辑按钮仅首行生效，其余行失效问题求助

算力阿峰

2026-7-1

表格多行编辑按钮弹窗失效问题修复

开发的会员数据表格页面中，每行最后一列都设置了编辑按钮，点击本应弹出更新对话框，但目前仅第一行的编辑按钮能正常触发弹窗，其余行的按钮点击无响应。

原始相关代码

HTML/PHP 部分

<!-- FORM TO REGISTER -->
<?php include("add-form.php"); ?>
<?php include("update-form.php"); ?>
<!-- END OF FORM -->

<tbody id="showdata">
    <?php           
        $query = "SELECT tbl_members.MemberID, tbl_members.LastName, tbl_members.FirstName, tbl_members.Gender, tbl_plans.PlanName, tbl_membership.StartDate, tbl_membership.EndDate, tbl_members.JoinDate, tbl_members.Email, tbl_members.PhoneNumber 
                    FROM tbl_members 
                    JOIN tbl_membership ON tbl_members.MemberID = tbl_membership.MemberID 
                    JOIN tbl_plans ON tbl_plans.PlanID = tbl_membership.PlanID;";
        $result = mysqli_query($con, $query);

        while($row = mysqli_fetch_assoc($result))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }                                    
    ?>              
</tbody>            

<?php 

    if(isset($_POST['update_submit'])){
        $id = isset($_GET['MemberID']);
        $fName = $_POST['firstname'];
        $lName = $_POST['lastname'];
        $gender = $_POST['gender'];
        $birthDate = $_POST['birthdate'];
        $address = $_POST['address'];
        $phone = $_POST['phone'];
        
        $edit_query = mysqli_query($con,"UPDATE tbl_members SET FirstName='$fName', LastName='$lName', Gender ='$gender', DateOfBirth = '$birthDate', Address = '$address', PhoneNumber = '$phone' WHERE MemberID='$id';") or die("error occurred");

        if($edit_query){
            echo "<meta http-equiv='refresh' content='0'>";
        }
    }

    else{
    ?>    
        <dialog class="update-modal" id="modal">
        <div class="modal-form" method="dialog">
            <div class="head">
                <span class="material-icons-sharp">
                    edit
                </span>
                <h1> EDIT INFO </h1>
            </div>
                                    
            <form method="post">
                <div class="fillup-form">                               
                    <div class="block-1">
                        <label for="">First Name:</label><br>
                        <input type="text" name="firstname" value="" required><br><br>
                        <label for="">Last Name:</label><br>
                        <input type="text" name="lastname" value="" required><br><br>
                        <label for="">Date Of Birth:</label><br>
                        <input type="date" name="birthdate" value="" required><br><br>
                        <label for="">Gender:</label><br>
                        <input type="text" name="gender" value="" required><br><br>
                        <label for="">Address:</label><br>
                        <input type="text" name="address" value="" required><br><br>
                        <label for="">Phone Number:</label><br>
                        <input type="text" name="phone" value="" required><br><br>
                                
                    </div>

                </div>
                                                            
                <div class="buttons">
                    <button class="click close-updateModal">Cancel</button>
                    <button class="click submit-updateModal" name="update_submit">Submit</button>  
                </div>                                
            </form>

    </div>                                                   
</dialog>

<?php
    }
?>

JavaScript 部分

//update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModal = document.querySelector('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

open_updateModal.addEventListener('click', () => {
    modal2.showModal();

})

close_updateModal.addEventListener('click', () => {
    modal2.close();

})

问题原因

document.querySelector('.open-updateModal') 只会返回DOM中第一个匹配该类选择器的元素，因此仅第一行的编辑按钮被绑定了点击事件，其余行的按钮未关联任何触发逻辑。

修复方案

1. 使用事件委托绑定点击事件

事件委托是更高效的方式，尤其适用于动态生成的元素（如表格行）。将事件绑定到表格的父元素，通过判断点击目标是否为编辑按钮来触发弹窗：

// 更新对话框逻辑
const modal2 = document.querySelector('.update-modal');
const close_updateModal = document.querySelector('.close-updateModal');

// 使用事件委托绑定所有编辑按钮的点击事件
document.getElementById('showdata').addEventListener('click', (e) => {
    const target = e.target.closest('.open-updateModal');
    if (target) {
        modal2.showModal();
        // 可选：获取当前行的MemberID，用于后续填充表单数据
        const memberId = target.dataset.id;
        console.log('要编辑的会员ID:', memberId);
    }
});

close_updateModal.addEventListener('click', () => {
    modal2.close();
});

2. 修复PHP端的潜在问题

修正ID获取逻辑：原代码中$id = isset($_GET['MemberID']);错误，isset()返回布尔值，应改为获取实际ID值，同时添加SQL注入防护：

if(isset($_POST['update_submit'])){
    // 修正ID获取，同时过滤防止SQL注入
    $id = mysqli_real_escape_string($con, $_GET['MemberID']);
    $fName = mysqli_real_escape_string($con, $_POST['firstname']);
    $lName = mysqli_real_escape_string($con, $_POST['lastname']);
    $gender = mysqli_real_escape_string($con, $_POST['gender']);
    $birthDate = mysqli_real_escape_string($con, $_POST['birthdate']);
    $address = mysqli_real_escape_string($con, $_POST['address']);
    $phone = mysqli_real_escape_string($con, $_POST['phone']);
    
    $edit_query = mysqli_query($con,"UPDATE tbl_members SET FirstName='$fName', LastName='$lName', Gender ='$gender', DateOfBirth = '$birthDate', Address = '$address', PhoneNumber = '$phone' WHERE MemberID='$id';") or die("error occurred");

    if($edit_query){
        echo "<meta http-equiv='refresh' content='0'>";
    }
}

可选：填充弹窗表单数据：点击编辑按钮时，通过AJAX获取对应会员的数据并填充到弹窗表单中，提升用户体验。

最终效果

修改后，所有行的编辑按钮点击都会触发更新对话框，同时修复了SQL注入风险和ID获取错误。

内容的提问来源于stack exchange，提问作者CLARK LOUISE NAVALES

PHP表格每行编辑按钮仅首行生效，其余行失效问题求助

原始相关代码 #