为表格的每一行创建Accept按钮-php教程-PHP中文网

为表格的每一行创建Accept按钮

花韻仙語

发布： 2025-10-26 11:47:38

原创

410人浏览过

为表格的每一行创建accept按钮

本文旨在解决在动态生成的HTML表格中，为每一行添加一个"Accept"按钮，点击后显示特定列的问题。我们将详细介绍如何使用jQuery来实现这一功能，避免常见错误，并提供清晰的代码示例，确保即使是初学者也能轻松理解和应用。重点在于避免在循环中使用相同的ID，而是采用类名和相对路径来定位元素。

问题分析与解决方案

在动态生成的表格中，为每一行添加交互功能，最常见的错误是使用相同的ID。HTML中ID应该是唯一的，如果在循环中使用相同的ID，JavaScript将只会找到第一个匹配的元素，导致后续行无法正常工作。

正确的解决方案是使用类名（class）代替ID，并利用jQuery的DOM遍历方法，如closest()和find()，来精确定位需要操作的元素。

实现步骤

修改HTML结构：

将refuseAccept和showOptions的id属性更改为class属性。

<tbody>
    <?php
    $sql = "SELECT * FROM appointments INNER JOIN patients ON appointments.patientID =patients.patientID WHERE docID='$doctorId'";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    $i=0;
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $i++;
        extract($row);
        echo"<tr>
            <td >$i</td>
            <td>{$patientFName} {$patientLName}</td>
            <td>{$AppStart}</td>
            <td>{$AppEnd}</td>
            <td class='refuseAccept' style='display:block;'>
                <button type='button' class='btn btn-outline-danger'>refuse</button>
                <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'  >accept</button>
            </td>
            <td class='showOptions m-2' style='display:none;'>
                <a href='#' title='view Details' class='text-success p-2 addappoment' > <i class='fas fa-calendar-check'></i></a>
                <a href='#' title='Edit' class='text-primary p-2 editBtn' ><i class='fas fa-user-edit'></i> </a>
                <a href='#' title='Delete' class='text-danger p2 deleteBtn' ><i class='fas fa-user-times'></i> </a>
            </td>
        </tr>";
    }
    ?>
</tbody>

登录后复制

注意：showOptions 初始时 display:none，refuseAccept 初始时 display:block。

编写jQuery代码：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

使用$(this)引用点击的按钮，然后使用closest('tr')找到包含该按钮的zuojiankuohaophpcntr>元素。再使用find()方法在<tr>元素内部查找具有相应类名的元素，并进行显示或隐藏操作。

$(document).on('click', '.acceptPpomentDoc', function() {
    // $(this) references the item clicked, in this case the accept button
    $(this).closest('tr').find('.showOptions').show();
    // find the containing <tr>, then from there find the div with class name showOptions and set display:block
    $(this).closest('tr').find('.refuseAccept').hide();
    // find the containing <tr>, then from there find the div with class name refuseAccept and set display:none
});

登录后复制

添加CSS样式（可选）：

如果需要在页面加载时隐藏showOptions列，可以在CSS中添加以下样式。
```
.showOptions {
    display: none;
}
```
登录后复制

引入jQuery库 确保在HTML文件中引入了jQuery库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

登录后复制

完整示例代码

以下是一个完整的示例，展示了如何实现这个功能：

<!DOCTYPE html>
<html>
<head>
    <title>Accept Button Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).on('click', '.acceptPpomentDoc', function() {
            $(this).closest('tr').find('.showOptions').show();
            $(this).closest('tr').find('.refuseAccept').hide();
        });
    </script>
    <style>
        .showOptions {
            display: none;
        }
    </style>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Start</th>
                <th>End</th>
                <th>Actions</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>10:00</td>
                <td>11:00</td>
                <td class='refuseAccept'>
                    <button type='button' class='btn btn-outline-danger'>Refuse</button>
                    <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>Accept</button>
                </td>
                <td class='showOptions m-2'>
                    <strong>ACCEPTED</strong>
                    <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a>
                    <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a>
                    <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>11:00</td>
                <td>12:00</td>
                <td class='refuseAccept'>
                    <button type='button' class='btn btn-outline-danger'>Refuse</button>
                    <button type='button' class='btn btn-outline-success m-2 acceptPpomentDoc'>Accept</button>
                </td>
                <td class='showOptions m-2'>
                    <strong>ACCEPTED</strong>
                    <a href='#' title='view Details' class='text-success p-2 addappoment'> <i class='fas fa-calendar-check'></i></a>
                    <a href='#' title='Edit' class='text-primary p-2 editBtn'><i class='fas fa-user-edit'></i> </a>
                    <a href='#' title='Delete' class='text-danger p2 deleteBtn'><i class='fas fa-user-times'></i> </a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

登录后复制