Создать эффект ящика в таблице - PullRequest
Новая
       39

Создать эффект ящика в таблице

0 голосов
/ 12 апреля 2020

Я создаю таблицу со строками. Когда я mouseover любой строки, другая строка непосредственно под первой с display=None изменяется на display="", что позволяет ему появляться. Это работает нормально.

Я хочу поставить onmouseleave=function(id), который снова будет скрывать второй ряд, когда мышь покидает эти два ряда. Например, переходит в третий ряд или выключается в сторону страницы.

Эффект похож на раскрывающийся список, который появляется, чтобы пользователь мог видеть больше информации и нажимать кнопки. Однако, когда я помещаю вызов onmouseleave в первый ряд (тот, который вызывает появление второго), я не могу навести курсор мыши на второй ряд, иначе он исчезает, потому что мышь покинула первый ряд. Если я наведу указатель мыши на второй ряд, то строка не исчезнет, ​​если она не наведена мышью первой. Таким образом, если я выйду из боковой части первого ряда, он не исчезнет, ​​потому что мышь никогда не пройдет над ним.

Я попытался обернуть обе строки в <div>, но так не удалось вызвать функцию onmouseleave=function(id) вообще. Я думаю, что <div> не может обернуть две <tr>?

Как я могу позволить этим двум строкам таблицы функционировать как одна onmouseleave=?

Это не позволяет мне нажимать на секунду строка -> https://jsfiddle.net/tvxpzud8/

Это не работает вообще-> https://jsfiddle.net/01w9js8x/

function openDrawer(drawer_id) {
  var drawer = document.getElementById("drawer-" + drawer_id);
  drawer.style.display = "";
}

function closeDrawer(drawer_id) {
  drawer = document.getElementById("drawer-" + drawer_id);
  drawer.style.display = "none";
}
<table>

  <tr onmouseover="openDrawer(1)" onmouseleave="closeDrawer(1)">
    <td>col 1-1</td>
    <td>col 1-2</td>
    <td>col 1-3</td>
  </tr>

  <tr id="drawer-1" style="display:none;">
    <td>col 2-1</td>
    <td>col 2-2</td>
    <td>col 2-3</td>
  </tr>

  <tr onmouseover="openDrawer(2)" onmouseleave="closeDrawer(2)">
    <td>col 3-1</td>
    <td>col 3-2</td>
    <td>col 3-3</td>
  </tr>

  <tr id="drawer-2" style="display:none;">
    <td>col 4-1</td>
    <td>col 4-2</td>
    <td>col 4-3</td>
  </tr>

</table>

1 Ответ

1 голос
/ 12 апреля 2020

Возможно, есть лучшие решения, это только первое, что пришло мне в голову.

  1. Переместите onmouseleave из строк в таблицу и измените его, чтобы скрыть все ящики. Я добавил class="drawer", чтобы я мог выбрать их все сразу.
  2. Оставьте onmouseover s там, где они есть, но измените функцию, чтобы скрыть все ящики, прежде чем показывать текущий.

См. Мою скрипку .

...