Как отобразить таблицу данных, когда пользователь наводит курсор на ячейку другой таблицы?

Question

Мне нужно создать таблицу из списка объектов. Каждая строка будет содержать только основную информацию для каждого объекта. Однако когда пользователь наводит курсор на определенную ячейку, я хочу, чтобы появилось всплывающее окно, которое содержит всю информацию для этого конкретного объекта. Может быть, всплывающее окно должно быть в форме таблицы со всеми подробностями какого-то рода? Как мне это сделать? Могу ли я использовать JQuery с некоторыми эффектами?

Answer 1

Да, JQuery отлично подходит для такого рода вещей.

есть (по крайней мере) два способа сделать это:

1. предварительно заполнено и скрыто (CSS): создайте на странице HTML все всплывающие подробные таблицы внутри видимых ячеек, используя CSS, чтобы расположить их «над» основным слоем (и вне ячейки) и с помощью display:none и добавьте .maincell:hover .detailtable { display:block;}, чтобы сделать их видимыми, когда курсор находится в главной ячейке.

2. AJAX: связать функции с событиями "mouseenter" / "mouseleave" каждой основной ячейки, там вы используете AJAX для получения таблицы подробностей с сервера и отображения в позиционном <div>, предпочтительно на фиксированном поместите или, может быть, на несколько пикселей справа от курсора (если это небольшая таблица). Функция $("#inspector").load(dataURL) в jQuery упрощает задачу (где «инспектор» - это идентификатор <div>, куда вы вставляете таблицу подробностей).

Answer 2

Я использую jQuery tooltip для такого рода вещей. Вы можете использовать опцию bodyHandler для выполнения Javascript, чтобы заполнить панель всплывающей подсказки, которую вы можете произвольно стилизовать. Смотрите примеры.

Answer 3

Привязать слушателя событий при наведении курсора мыши - таким образом, когда они наводят курсор на намеченный элемент, будет вызываться ваш обратный вызов. Внутри обратного вызова у вас есть доступ к элементу, который вызвал событие - в вашем случае td или tr - с помощью которого вы получите содержимое всей строки, используя соответствующий селектор jquery. Тогда вы можете отобразить диалог, и теперь, когда у вас есть контент, вы можете отобразить его внутри диалога.

Answer 4

Да, вы можете. Для этого вы можете использовать http://dev.iceburg.net/jquery/jqModal/.