如何通过 Javascript 将 table 设置为在点击 1 次时出现

Question

我已经通过 css 将我的 table 设置为隐藏，但是当我通过 javascript 运行 onclick 函数时，它需要两次点击（双击）为了使 table 再次可见。

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

下面是我的代码的图片

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 中的值。您的代码所做的是，在鼠标按下时它会立即转到其他地方。所以 table 它又一次被隐藏了。第二次点击它显示 table.

Answer 2

如果你想在你的项目中使用JQuery，你可以这样做首先在 header

中包含 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 来节省您的大量精力

如何通过 Javascript 将 table 设置为在点击 1 次时出现

how to set a table to appear upon 1 click via Javascript

javascript

onclick

button

toggle

visible