点击表格展开隐藏内容，JS轻松实现

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

问题分析

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

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

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

解决方法：

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

示例代码：

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

或者：

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

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

解决方案二：使用 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 方式来处理事件，提高代码质量。