使用 JavaScript 实现表格的点击显示与隐藏-php教程-PHP中文网

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

花韻仙語

发布： 2025-07-17 18:08:02

原创

976人浏览过

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

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

问题分析与解决方案

原始代码尝试通过在 PHP 生成的表格的 <td> 元素上添加 onclick 事件来调用 JavaScript 函数 show()，以控制另一个表格的显示和隐藏。然而，由于 PHP 中字符串的引号处理不当，导致生成的 HTML 代码中 onclick 属性的值不正确，从而导致 JavaScript 函数无法正确执行。

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

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

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

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

<?php
    // ... (你的 PHP 代码) ...

    for ($i=0; $i < count($Kontakte); $i++) {   
        echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
                  "<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
                  "<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . "<td onclick=\"show('example');\">".$Kontakte[$i][7]."</td>" . " <td></tr>";
    }
?>

登录后复制

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

科威旅游管理系统源码

系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

解决方案二：使用 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 代码需要修改，将需要绑定点击事件的 <td> 元素添加一个 class，例如 showExample：

<?php
    // ... (你的 PHP 代码) ...

    for ($i=0; $i < count($Kontakte); $i++) {   
        echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
                  "<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
                  "<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . "<td class='showExample'>".$Kontakte[$i][7]."</td>" . " <td></tr>";
    }
?>

登录后复制

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

<table class="grade_Fruehauf" style="visibility:hidden" id="example">
  <tr>
    <th>Fruehauf</th>
  </tr>
  <tr>
    <th>Deutsch</th>
    <th>3.5</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>3.5</th>
  </tr>
  <tr>
    <th>Biologie</th>
    <th>3.5</th>
  </tr>
  <tr>
    <th>Französisch</th>
    <th>4</th>
  </tr>
  <tr>
    <th>Durchschnitt</th>
    <th style="border-top:solid;">3.6
    </th>
  </tr>
</table>

登录后复制

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>表格点击显示与隐藏</title>
  <style>
    .grade_Fruehauf {
      width: 80%;
      min-width: 550px;
    }
  </style>
</head>
<body>

  <table>
    <tr><td class="showExample">Example</td></tr>
    <tr><td class="showExample">Example</td></tr>
  </table>

  <div class="Note">
    <div style="width: 80%; min-width: 550px">

      <table class="grade_Fruehauf" style="visibility:hidden" id="example">
        <tr>
          <th>Fruehauf</th>
        </tr>

        <tr>
          <th>Deutsch</th>
          <th>3.5</th>
        </tr>

        <tr>
          <th>Math</th>
          <th>3.5</th>
        </tr>

        <tr>
          <th>Biologie</th>
          <th>3.5</th>
        </tr>

        <tr>
          <th>Französisch</th>
          <th>4</th>
        </tr>

        <tr>
          <th>Durchschnitt</th>
          <th style="border-top:solid;">3.6
          </th>
        </tr>

      </table>
      <div>
      </div>
    </div>
  </div>

  <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>

</body>
</html>

登录后复制