如果你想使用不同的链接在多个表格中切换不同的隐藏文本，这里有一个例子：

function toggleText(textId) {
      var hiddenText = document.getElementById(textId);

      if (hiddenText.style.display === 'none' || hiddenText.style.display === '') {
        hiddenText.style.display = 'block';
      } else {
        hiddenText.style.display = 'none';
      }
    }

.hidden-text {
      display: none;
    }

<table>
    <tr>
      <td>
        <a href="#" onclick="toggleText('text1')">Toggle Text 1</a>
        <div id="text1" class="hidden-text">
          <p>This is the hidden text for Text 1.</p>
        </div>
      </td>
    </tr>
    <!-- Add more tables as needed -->
  </table>

  <table>
    <tr>
      <td>
        <a href="#" onclick="toggleText('text2')">Toggle Text 2</a>
        <div id="text2" class="hidden-text">
          <p>This is the hidden text for Text 2.</p>
        </div>
      </td>
    </tr>
    <!-- Add more tables as needed -->
  </table>

看看这段代码，我试过不使用jQuery。如果你包含jQuery，那就太容易了。

function toggleme(elementId) {
            var ele = document.getElementById(elementId);

            if (ele.style.display === "block" || ele.style.display === "") {
                ele.style.display = "none";
            } else {
                ele.style.display = "block";
            }
        }

body {
    font-family: Arial, sans-serif;
}

a {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    margin-right: 10px;
}

.hideme {
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
}

<a onclick="toggleme('toggleText1');">Show</a>
<div id="toggleText1" class="hideme" style="display: none">
    <h1>Hello world 1</h1>
</div>

<a onclick="toggleme('toggleText2');">Show</a>
<div id="toggleText2" class="hideme" style="display: none">
    <h1>Hello world 2</h1>
</div>