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

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

问题分析

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

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

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

解决方法：

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

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

示例代码：

echo "".$Kontakte[$i][7]."";

或者：

echo ''.$Kontakte[$i][7].'';

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

科威旅游管理系统

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

下载

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

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

步骤：

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

示例代码：

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";
      }
    });
  });
});

完整示例：

  
Example
  
Example



  


    

      

        
Fruehauf
      

      

        
Deutsch
        
3.5
      

      

        
Math
        
3.5
      

      

        
Biologie
        
3.5
      

      

        
Französisch
        
4
      

      

        
Durchschnitt
        
3.6
      

    
    

    
  

注意事项：

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

总结

本文档介绍了两种实现点击表格单元格显示/隐藏另一个表格的方法。修正内联事件处理可以解决语法错误，但使用 addEventListener 更加灵活和易于维护。建议使用 addEventListener 方式来处理事件，提高代码质量。