投稿获客
  1. 创想鸟首页
  2. 好文分享

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

程序猿 • • 好文分享 • 阅读 0

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

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

问题分析

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

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

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

解决方法：

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

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

示例代码：

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

或者：

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

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

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

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

步骤：

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






注意事项：


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


总结


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


以上就是使用 JavaScript 实现表格点击显示/隐藏效果的详细内容，更多请关注创想鸟其它相关文章！


                                                        
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。

发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1264773.html
                        


                        

                        

                            
 赞 (0)

                                                            

                                     打赏                                    
                                                                                    
                                                微信扫一扫
                                                    微信扫一扫                                            
                                                                                                                            
                                                支付宝扫一扫
                                                    支付宝扫一扫                                            
                                                                            
                                

                                                    


                        

                            

                                                                

                                    

                                                                                     0                                         0                                                                            

                                    
                                    

                                        
                                    

                                

                            

                        

                    

                    

    
关于作者
    

        

            程序猿的头像
        

        

            

                

                    程序猿签约作者
                

                

                                    

            

                            
            

                291.1K
                文章
            

                    

                0
                评论
            

                    

                1
                粉丝
            

        

                        
这个人很懒，什么都没有留下～
        

    


                        

                    

                
                

                     上一篇
                    2025年12月10日 08:45:37
                

            

                            

                
                

                    下一篇 
                    2025年12月10日 08:45:54
                

            

            

                                                                

                            
相关推荐
                        

                    


    	

		
发表回复 
登录后才能评论
 
	

		

                

                    

            
    




            

                                                

                                                                                                            

                                        关注微信