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

为表格的每一行创建独立的Accept按钮功能

聖光之護

发布： 2025-10-26 10:27:14

原创

446人浏览过

为表格的每一行创建独立的accept按钮功能

本文旨在解决在动态生成的HTML表格中，为每一行添加独立的Accept按钮功能时遇到的问题。通过修改JavaScript代码，利用jQuery选择器准确定位每一行中的元素，并使用CSS类名替代重复的ID，确保Accept按钮的点击事件只影响当前行，从而实现预期的交互效果。

在动态生成的HTML表格中，为每一行添加一个Accept按钮，点击后显示特定列并隐藏其他列，是一个常见的需求。然而，如果处理不当，可能会出现点击一个按钮影响所有行的问题。本文将详细介绍如何正确实现这一功能，并避免常见的错误。

问题分析

原始代码的问题在于使用了相同的ID（showOptions和refuseAccept）多次。在HTML中，ID应该是唯一的，因此document.getElementById只会返回第一个匹配的元素。这导致点击任何一行的Accept按钮，都只会影响表格的第一行。

解决方案

解决此问题的关键在于：

使用类名代替ID：将id='showOptions'和id='refuseAccept'替换为class='showOptions'和class='refuseAccept'。
使用jQuery选择器定位元素：利用jQuery的$(this)选择器，找到当前点击的按钮，然后使用.closest('tr')找到该按钮所在的行，最后在该行内查找需要操作的元素。

以下是修改后的代码示例：

HTML (PHP)

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

登录后复制

注意以下几点修改：

id 属性被替换为 class 属性。
showOptions 单元格的 style='display:none;' 属性被添加，确保默认情况下该列是隐藏的。

JavaScript (jQuery)

crmeb电商系统

CRMEB 是基于Thinkphp5基础开发的以会员为中心的电商系统，开源版微信公众号商城和小程序商城数据同步，带积分、优惠券、秒杀、砍价、分销等功能，更是一套方便二次开发的商城框架（后台封装了独有快速创建表单功能，无需写表单页面、快速创建数据搜索和数据列表页、导出表格、系统权限配置控制每一个控制器方法、系统参数配置、数据字典、组合数据等）

查看详情

$(document).on('click', '.acceptPpomentDoc', function() {
    $(this).closest('tr').find('.showOptions').show();
    $(this).closest('tr').find('.refuseAccept').hide();
});

登录后复制

这段代码的关键在于：

$(this): 指向触发点击事件的元素（即Accept按钮）。
.closest('tr'): 从当前元素开始，向上查找最近的元素，也就是包含该按钮的表格行。
.find('.showOptions'): 在找到的表格行内，查找类名为 showOptions 的元素。
.show() 和 .hide(): 分别用于显示和隐藏元素。

CSS (可选)

为了确保 showOptions 默认是隐藏的，可以在CSS中添加以下样式：

.showOptions {
  display: none;
}

登录后复制

或者直接在HTML中通过行内样式设置。

完整示例

以下是一个完整的示例，包括HTML、JavaScript和CSS：

<!DOCTYPE html>
<html>
<head>
    <title>Accept Button Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .showOptions {
            display: none;
        }
    </style>
</head>
<body>
    <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>9:00</td>
                <td>10: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>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>
        </tbody>
    </table>

    <script>
        $(document).on('click', '.acceptPpomentDoc', function() {
            $(this).closest('tr').find('.showOptions').show();
            $(this).closest('tr').find('.refuseAccept').hide();
        });
    </script>
</body>
</html>

登录后复制

注意事项

确保引入了 jQuery 库。
如果表格是通过 AJAX 动态加载的，需要使用 $(document).on('click', '.acceptPpomentDoc', function() { ... }); 这种事件委托方式，确保事件绑定到动态添加的元素上。
如果需要更复杂的交互，例如发送 AJAX 请求，可以在 acceptPpomentDoc 点击事件处理函数中添加相应的代码。