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

为表格的每一行添加独立的Accept按钮功能

心靈之曲

发布： 2025-10-26 08:34:09

原创

549人浏览过

为表格的每一行添加独立的accept按钮功能

本文旨在解决在动态生成的HTML表格中，为每一行添加独立的Accept按钮并控制其对应行的显示与隐藏的问题。通过避免重复ID的使用，并利用jQuery的DOM遍历功能，实现点击Accept按钮后，仅改变当前行中特定元素的显示状态，从而确保每一行Accept按钮的功能互不干扰。

在动态生成的HTML表格中，为每一行添加独立的Accept按钮并控制其对应行的显示与隐藏，是一个常见的需求。然而，直接使用ID来操作DOM元素，容易因为ID重复而导致JavaScript代码只对第一行生效。本文将介绍如何使用类名（class）和jQuery的DOM遍历方法来解决这个问题，确保每一行的Accept按钮都能独立工作。

避免ID重复：使用Class代替ID

在HTML中，ID应该是唯一的，而Class可以重复使用。当我们需要对多个元素应用相同的样式或行为时，应该使用Class。

原代码中使用了id='showOptions'和id='refuseAccept'，这导致所有行都共享相同的ID，使得JavaScript代码只能找到第一个匹配的元素。我们需要将它们改为Class：

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

登录后复制

使用jQuery的DOM遍历

为了确保点击Accept按钮后，只改变当前行中特定元素的显示状态，我们需要使用jQuery的DOM遍历方法。

$(this): 引用触发事件的元素（在本例中是点击的Accept按钮）。
$(this).closest('tr'): 找到最近的父级<tr>元素。
$(this).closest('tr').find('.showOptions'): 在找到的<tr>元素中，查找所有Class为showOptions的元素。
$(this).closest('tr').find('.refuseAccept'): 在找到的<tr>元素中，查找所有Class为refuseAccept的元素。

修改后的JavaScript代码如下：

飞书多维表格

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

查看详情

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

登录后复制

这段代码的含义是：当点击Class为acceptPpomentDoc的元素时，找到它最近的父级<tr>元素，然后在该<tr>元素中，显示Class为showOptions的元素，并隐藏Class为refuseAccept的元素。

完整示例

以下是一个完整的示例，展示了如何使用Class和jQuery的DOM遍历方法来实现每一行Accept按钮的独立功能：

<!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">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
  <style>
    .showOptions {
      display: none;
    }
  </style>
</head>
<body>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Patient Name</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Actions</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>9:00 AM</td>
      <td>9:30 AM</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 AM</td>
      <td>10:30 AM</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 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>

</body>
</html>

登录后复制

在这个示例中，我们创建了一个包含两行的表格。每一行都有一个Accept按钮，点击Accept按钮后，只有当前行的Options列会显示出来，而Actions列会被隐藏。