使用 JavaScript 实现表格的点击显示与隐藏

本文将详细介绍如何使用 JavaScript 实现点击表格单元格，动态显示和隐藏另一个表格的功能。我们将首先分析原始代码存在的问题，然后提供两种解决方案：修正内联事件处理以及使用 addEventListener 方法，并提供完整的代码示例，旨在帮助开发者更高效地实现动态网页效果。

问题分析与解决方案

原始代码尝试通过在 PHP 生成的表格的

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

在 PHP 中生成 HTML 代码时，需要特别注意引号的正确使用。为了避免引号冲突，可以使用单引号包裹 JavaScript 函数的参数，或者使用反斜杠 \ 转义双引号。

以下是修正后的 PHP 代码示例：

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

 ".($i+1)."" . "".$Kontakte[$i][0]."" .
                  "".$Kontakte[$i][1]."" . "".$Kontakte[$i][2]."" . "".$Kontakte[$i][3]."" .
                  "".$Kontakte[$i][4]."" . "".$Kontakte[$i][5]."" . "".$Kontakte[$i][6]."" . "".$Kontakte[$i][7]."" . " ";
    }
?>

在这个修正后的代码中，我们将 onclick 属性的值修改为 show('example')，使用单引号包裹了参数 example，从而避免了与 HTML 属性的双引号冲突。

网趣网上购物系统旗舰版

网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。

下载

解决方案二：使用 addEventListener

另一种更现代、更推荐的解决方案是使用 addEventListener 方法来绑定事件处理函数。这种方法可以避免内联事件处理的一些问题，例如代码可读性差、不易维护等。

以下是使用 addEventListener 方法的 JavaScript 代码示例：

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

对应的 HTML 代码需要修改，将需要绑定点击事件的

 ".($i+1)."" . "".$Kontakte[$i][0]."" .
                  "".$Kontakte[$i][1]."" . "".$Kontakte[$i][2]."" . "".$Kontakte[$i][3]."" .
                  "".$Kontakte[$i][4]."" . "".$Kontakte[$i][5]."" . "".$Kontakte[$i][6]."" . "".$Kontakte[$i][7]."" . " ";
    }
?>

同时，为了在页面加载时隐藏目标表格，需要在 CSS 中设置其初始 visibility 属性为 hidden：

  

    
Fruehauf
  
  

    
Deutsch
    
3.5
  
  

    
Math
    
3.5
  
  

    
Biologie
    
3.5
  
  

    
Französisch
    
4
  
  

    
Durchschnitt
    
3.6
    
  

完整代码示例

  
  



  

    
Example
    
Example
  

  

    


      

        

          
Fruehauf
        

        

          
Deutsch
          
3.5
        

        

          
Math
          
3.5
        

        

          
Biologie
          
3.5
        

        

          
Französisch
          
4
        

        

          
Durchschnitt
          
3.6
          
        

      
      

      
    
  

  

注意事项与总结

• 引号处理： 在 PHP 中生成 HTML 代码时，务必注意引号的正确使用，避免引号冲突导致 JavaScript 代码无法正确执行。
• 事件绑定： 推荐使用 addEventListener 方法来绑定事件处理函数，避免内联事件处理的一些问题。
• 代码可读性： 保持代码的清晰和可读性，使用有意义的变量名和注释，方便日后维护和修改。
• 初始状态： 根据需求设置元素的初始状态，例如在页面加载时隐藏目标表格。

通过本文的介绍，相信你已经掌握了使用 JavaScript 实现表格点击显示与隐藏的两种方法。在实际开发中，可以根据具体情况选择合适的解决方案。