使用 JavaScript 实现表格点击显示/隐藏效果-php教程-PHP中文网

使用 JavaScript 实现表格点击显示/隐藏效果

霞舞

发布： 2025-07-17 18:02:13

原创

204人浏览过

使用 javascript 实现表格点击显示/隐藏效果

本文档旨在指导开发者如何通过 JavaScript 实现点击表格单元格来显示或隐藏另一个表格的功能。我们将探讨两种实现方式：修正原始代码中的内联事件处理，以及使用 addEventListener 优化代码结构，提高可维护性。

问题分析

原始代码尝试通过 onclick 事件调用 JavaScript 函数 show() 来控制表格的显示和隐藏。然而，由于在 PHP 代码中直接输出 HTML，双引号的使用导致了 JavaScript 代码的语法错误。此外，内联事件处理方式不利于代码维护和扩展。

解决方案一：修正内联事件处理

问题的根源在于 HTML 属性 onclick 的值中使用了双引号，这与 PHP 输出字符串的双引号冲突，导致 JavaScript 代码解析错误。

解决方法：

立即学习“Java免费学习笔记（深入）”；

转义双引号： 使用反斜杠 \ 转义内部的双引号。
使用单引号： 使用单引号包裹 onclick 属性值内的字符串。

示例代码：

echo "<td onclick=\"show('example');\">".$Kontakte[$i][7]."</td>";

登录后复制

或者：

echo '<td onclick="show(\'example\');">'.$Kontakte[$i][7].'</td>';

登录后复制

这样就能确保生成的 HTML 代码中 onclick 属性的值正确地传递给 JavaScript 函数。

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

解决方案二：使用 addEventListener 优化事件处理

使用 addEventListener 可以避免内联事件处理带来的问题，并提高代码的可维护性和可读性。

步骤：

添加 CSS 类： 为需要绑定点击事件的 <td> 元素添加一个统一的 CSS 类，例如 showExample。
编写 JavaScript 代码： 使用 document.addEventListener 监听 DOMContentLoaded 事件，确保在 DOM 加载完成后执行 JavaScript 代码。
获取元素： 使用 document.querySelectorAll 获取所有带有 showExample 类的 <td> 元素。
绑定事件监听器： 使用 forEach 循环遍历所有 <td> 元素，并使用 addEventListener 为每个元素绑定 click 事件监听器。
实现显示/隐藏逻辑： 在事件监听器函数中，获取需要显示/隐藏的表格元素，并根据其当前 visibility 属性来切换显示状态。

示例代码：

<td class="showExample">

登录后复制

document.addEventListener('DOMContentLoaded', function() {
  var tds = document.querySelectorAll(".showExample");
  tds.forEach(function(td) {
    td.addEventListener('click', function(e) {
      var x = document.querySelector("#example");
      if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
      } else {
        x.style.visibility = "hidden";
      }
    });
  });
});

登录后复制

完整示例：

<table>
  <tr><td class="showExample">Example</td></tr>
  <tr><td class="showExample">Example</td></tr>
</table>

<div class="Note">
  <div style="width: 80%; min-width: 550px">

    <table class="grade_Fruehauf" style="visibility:hidden" id="example">
      <tr>
        <th>Fruehauf</th>
      </tr>

      <tr>
        <th>Deutsch</th>
        <th>3.5</th>
      </tr>

      <tr>
        <th>Math</th>
        <th>3.5</th>
      </tr>

      <tr>
        <th>Biologie</th>
        <th>3.5</th>
      </tr>

      <tr>
        <th>Französisch</th>
        <th>4</th>
      </tr>

      <tr>
        <th>Durchschnitt</th>
        <th style="border-top:solid;">3.6</th>
      </tr>

    </table>
    <div>
    </div>
  </div>
</div>

<script>
 document.addEventListener('DOMContentLoaded', function() {
   var tds = document.querySelectorAll(".showExample");
   tds.forEach(function(td) {
     td.addEventListener('click', function(e) {
       var x = document.querySelector("#example");
       if (x.style.visibility === "hidden") {
         x.style.visibility = "visible";
       } else {
         x.style.visibility = "hidden";
       }
     });
   });
 });
</script>

登录后复制

注意事项：

确保在页面加载完成后执行 JavaScript 代码，可以使用 document.addEventListener('DOMContentLoaded', function() { ... });。
初始状态下，将需要隐藏的表格的 visibility 属性设置为 hidden。
querySelector 和 querySelectorAll 方法需要传入 CSS 选择器，例如 #example (ID 选择器) 和 .showExample (类选择器)。