本文档旨在指导开发者如何通过 JavaScript 实现点击表格单元格来显示或隐藏另一个表格的功能。我们将探讨两种实现方式：修正原始代码中的内联事件处理，以及使用 addEventListener 优化代码结构，提高可维护性。
问题分析
原始代码尝试通过 onclick 事件调用 JavaScript 函数 show() 来控制表格的显示和隐藏。然而，由于在 PHP 代码中直接输出 HTML，双引号的使用导致了 JavaScript 代码的语法错误。此外，内联事件处理方式不利于代码维护和扩展。
解决方案一：修正内联事件处理
问题的根源在于 HTML 属性 onclick 的值中使用了双引号，这与 PHP 输出字符串的双引号冲突，导致 JavaScript 代码解析错误。
解决方法：
立即学习“Java免费学习笔记（深入）”；
- 转义双引号： 使用反斜杠 / 转义内部的双引号。
- 使用单引号： 使用单引号包裹 onclick 属性值内的字符串。
示例代码：
echo "<td onclick=/"show('example');/">".$Kontakte[$i][7]."</td>";
登录后复制
或者：
echo '<td onclick="show(/'example/');">'.$Kontakte[$i][7].'</td>';
登录后复制
这样就能确保生成的 HTML 代码中 onclick 属性的值正确地传递给 JavaScript 函数。
解决方案二：使用 addEventListener 优化事件处理
使用 addEventListener 可以避免内联事件处理带来的问题，并提高代码的可维护性和可读性。
步骤：
-
添加 CSS 类： 为需要绑定点击事件的
元素添加一个统一的 CSS 类，例如 showExample。 - 编写 JavaScript 代码： 使用 document.addEventListener 监听 DOMContentLoaded 事件，确保在 DOM 加载完成后执行 JavaScript 代码。
- 获取元素： 使用 document.querySelectorAll 获取所有带有 showExample 类的
元素。 - 绑定事件监听器： 使用 forEach 循环遍历所有
元素，并使用 addEventListener 为每个元素绑定 click 事件监听器。 - 实现显示/隐藏逻辑： 在事件监听器函数中，获取需要显示/隐藏的表格元素，并根据其当前 visibility 属性来切换显示状态。
示例代码：
<td class="showExample">
登录后复制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"; } }); }); });登录后复制完整示例：
<td class="showExample">Example <td class="showExample">Example <script> 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"; } }); }); }); </script>登录后复制注意事项：
- 确保在页面加载完成后执行 JavaScript 代码，可以使用 document.addEventListener(‘DOMContentLoaded’, function() { … });。
- 初始状态下，将需要隐藏的表格的 visibility 属性设置为 hidden。
- querySelector 和 querySelectorAll 方法需要传入 CSS 选择器，例如 #example (ID 选择器) 和 .showExample (类选择器)。
总结
本文档介绍了两种实现点击表格单元格显示/隐藏另一个表格的方法。修正内联事件处理可以解决语法错误，但使用 addEventListener 更加灵活和易于维护。建议使用 addEventListener 方式来处理事件，提高代码质量。
以上就是使用 JavaScript 实现表格点击显示/隐藏效果的详细内容，更多请关注php中文网其它相关文章！