javascript - 单击下一步按钮时按钮内容关闭

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 个按钮时，它只会打开该表并关闭该行中的所有剩余表:

for(i=1;i<=2;++i)其中“2”是最后一个表 ID 索引，同样是表的最大 ID，如 displaytable2。

• 该函数获取一个整数参数，具体取决于按钮或相应表的序列号，即第一个为 1，第二个为 2，如代码中所示。
• 您可能希望将所有按钮分别排列在一起，并将表格分别排列在一起，如下所示，这样当单击一个按钮时，其余按钮不会下降到表格下方。

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";
    }
  }

}

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