如何通过Java单击1次以显示表格

Question

我已通过CSS将表设置为隐藏，但是当我通过javascript运行onclick函数时，需要两次单击（双击）才能使表再次可见。

您知道如何将其设置为一键显示吗？

下面是我代码中的图像

HTML

CSS

Javascript

Answer 1

function showTable()
{
var x = document.getElementById("OperatingScheduler");
if(x.style.visibility=='visible')
{
  x.style.visibility = 'hidden';
}
else
{
  x.style.visibility='visible';
}
}

#OperatingScheduler{
visibility:hidden;
}

<div id="wrapper">
  <button onmousedown="showTable()">Trading Times</button>
  <button>StudioSchedule</button>
</div>

<table id="OperatingScheduler">
  <tr>
    <th>Day</th>
    <th>Time</th>
  </tr>
</table>

问题已解决。 ;）

只要在if else中更改值。您的代码所做的是，只要将鼠标移至其他位置即可。因此表再次被隐藏。第二次单击将显示该表。

Answer 2

如果要在项目中使用JQuery，可以执行此操作首先在标题中包含jquery

<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</header>

然后只是放在onmousedown $('#OperatingScheduler').toggle()] >>

table td{border:dashed;border-color:gray;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <button onmousedown="$('#OperatingScheduler').toggle()">Trading Times</button>
  <button>StudioSchedule</button>
</div>

<table id="OperatingScheduler">
  <tr>
    <td>Day</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>TuesDay</td>
    <td>6am-8am</td>
  </tr>
</table>

当您的项目变得越来越复杂时，您将需要使用jquery来节省大量精力

] >>