как настроить отображение таблицы при 1 клике через Javascript

Question

Я установил скрытую таблицу с помощью css, но когда я запускаю функцию onclick с помощью javascript, требуется два щелчка (двойной щелчок), чтобы снова сделать таблицу видимой.

Любая идея, как я могу сделать так, чтобы это отображалось одним щелчком мыши?

Ниже приведены изображения с моим кодом

HTML

CSS

Javascript

Answer 1

если вы хотите использовать JQuery в своих проектах, вы можете сделать это сначала, включив jquery в заголовок

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

, затем просто вставьте в дом $('#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, чтобы сэкономить огромные усилия

Answer 2

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. То, что делает ваш код, это то, что при наведении мыши он сразу переходит в другое. Так что стол снова скрывается. При втором щелчке отображается таблица.