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

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

花韻仙語

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

原创

432人浏览过

为表格的每一行创建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代码：

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

0

查看详情

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

登录后复制

完整示例代码

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




    Accept Button Example
    
    <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>
    


    
        
            
                #
                Name
                Start
                End
                Actions
                Options
            
        
        
            
                1
                John Doe
                10:00
                11:00
                
                    
                    
                
                
                    ACCEPTED
                     
                     
                     
                
            
            
                2
                Jane Smith
                11:00
                12:00
                
                    
                    
                
                
                    ACCEPTED