Question

我有两个用于存储表格的按钮，但是我希望表格在点击第二个按钮时消失并在点击后立即显示第二个按钮的内容，而不是单击它两次（第一次点击隐藏表格上一个按钮，下一次点击从当前按钮打开表格。我似乎不知道该怎么做。

function myFunction2() {
  var x = document.getElementById("displaytable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<input type="button" id="Button1" value="Button1" onClick="myFunction2()" />
<div id="displaytable" style="display:none">
  <table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column1</td>
      <td class="lbl">column2</td>
      <td class="lbl">column3</td>
    </tr>
    <tr>
      <td align="center">1</td>
      <td align="center">2</td>
      <td align="center">33</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">5</td>
      <td align="center">6</td>
    </tr>
  </table>
</div>

<input type="button" id="Button2" value="Button1" onClick="myFunction2()" />
<div id="displaytable" style="display:none">
  <table id="displaytable" width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column1</td>
      <td class="lbl">column2</td>
      <td class="lbl">column3</td>
    </tr>
    <tr>
      <td align="center">36</td>
      <td align="center">45</td>
      <td align="center">33</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">5</td>
      <td align="center">6</td>
    </tr>
  </table>
</div>

Answer 1

您必须进行以下更新：

您不能拥有与按钮和div相同ID的元素。查看修改，我将它们重命名为displaytable1,2，依此类推。
即使您有多个按钮及其对应的表（10,20甚至100），此代码也能正常工作。您不必为每个按钮单击创建单独的功能，并且可以运行循环，因此当您单击1按钮时，它将打开该表并关闭此行中的所有剩余表：

function myFunction2(index) { var x = document.getElementById("displaytable"+index); for(i=1;i<=3;++i) //3 because we have 3 tables { if(index==i){ x.style.display = "block"; } else{ document.getElementById("displaytable"+i).style.display = "none"; } } }其中'2'是最后一个表id索引，同样表的最大id是displaytable2。

该函数获取一个整数参数，具体取决于按钮的序列号或相应的表，第一个为1，第二个为2，如代码中所示。
您可能希望将所有按钮单独排列在一起，并且如下所示单独排列，因此当单击按钮时，其余按钮不会在桌面下方。

<input type="button" id="Button1" value="Button1" onClick="myFunction2('1')" />
<input type="button" id="Button2" value="Button2" onClick="myFunction2('2')" />
<input type="button" id="Button3" value="Button3" onClick="myFunction2('3')" />
<div id="displaytable1" style="display:none">

  <table width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column1</td>
      <td class="lbl">column2</td>
      <td class="lbl">column3</td>
    </tr>
    <tr>
      <td align="center">1</td>
      <td align="center">2</td>
      <td align="center">33</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">5</td>
      <td align="center">6</td>
    </tr>
  </table>
</div>


<div id="displaytable2" style="display:none">
  <table width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column2</td>
      <td class="lbl">column4</td>
      <td class="lbl">column5</td>
    </tr>
    <tr>
      <td align="center">36</td>
      <td align="center">45</td>
      <td align="center">33</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">5</td>
      <td align="center">6</td>
    </tr>
  </table>
</div>


<div id="displaytable3" style="display:none">
  <table width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column11</td>
      <td class="lbl">column23</td>
      <td class="lbl">column2</td>
    </tr>
    <tr>
      <td align="center">3</td>
      <td align="center">45</td>
      <td align="center">3</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">00</td>
      <td align="center">6</td>
    </tr>
  </table>
</div>

boolean showingFirst = true;

Answer 2

您多次使用id是完全错误的，您最常使用的是类或使用唯一ID。顺便说一句，你使用了第四次id，这会让你在使用JS及其非标准编码时遇到麻烦。

的 JS ：

单击下一个按钮即可关闭按钮内容

2 个答案: