本文将详细介绍如何使用 JavaScript 实现点击表格单元格，动态显示和隐藏另一个表格的功能。我们将首先分析原始代码存在的问题，然后提供两种解决方案：修正内联事件处理以及使用 addEventListener 方法，并提供完整的代码示例，旨在帮助开发者更高效地实现动态网页效果。
问题分析与解决方案
原始代码尝试通过在 PHP 生成的表格的
元素上添加 onclick 事件来调用 JavaScript 函数 show()，以控制另一个表格的显示和隐藏。然而，由于 PHP 中字符串的引号处理不当，导致生成的 HTML 代码中 onclick 属性的值不正确，从而导致 JavaScript 函数无法正确执行。
解决方案一：修正内联事件处理
在 PHP 中生成 HTML 代码时，需要特别注意引号的正确使用。为了避免引号冲突，可以使用单引号包裹 JavaScript 函数的参数，或者使用反斜杠 转义双引号。
以下是修正后的 PHP 代码示例：
立即学习“Java免费学习笔记（深入）”；
<?php // ... (你的 PHP 代码) ... for ($i=0; $i < count($Kontakte); $i++) { echo " ".($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 属性的双引号冲突。
解决方案二：使用 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 代码需要修改，将需要绑定点击事件的
元素添加一个 class，例如 showExample：
<?php // ... (你的 PHP 代码) ... for ($i=0; $i < count($Kontakte); $i++) { echo " ".($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 |
完整代码示例
表格点击显示与隐藏 .grade_Fruehauf { width: 80%; min-width: 550px; }
| Example |
| Example |
| Fruehauf | |
|---|---|
| Deutsch | 3.5 |
| Math | 3.5 |
| Biologie | 3.5 |
| Französisch | 4 |
| Durchschnitt | 3.6 |
注意事项与总结
引号处理： 在 PHP 中生成 HTML 代码时，务必注意引号的正确使用，避免引号冲突导致 JavaScript 代码无法正确执行。事件绑定： 推荐使用 addEventListener 方法来绑定事件处理函数，避免内联事件处理的一些问题。代码可读性： 保持代码的清晰和可读性，使用有意义的变量名和注释，方便日后维护和修改。初始状态： 根据需求设置元素的初始状态，例如在页面加载时隐藏目标表格。
通过本文的介绍，相信你已经掌握了使用 JavaScript 实现表格点击显示与隐藏的两种方法。在实际开发中，可以根据具体情况选择合适的解决方案。
以上就是使用 JavaScript 实现表格的点击显示与隐藏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1288707.html
微信扫一扫 
支付宝扫一扫 
