Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2024, 14:10
Новичок на форуме
Отправить личное сообщение для ne_proger Посмотреть профиль Найти все сообщения от ne_proger
 
Регистрация: 05.02.2024
Сообщений: 1

Скрол таблицы до выбранной строки
Здравствуйте!

На странице есть таблица
<table class="table-with-border" id="dataList">
  <tr>
    <td>Поле 1</td>
    <td>Поле 2</td>
    <td>Поле 3</td>
    <td>Поле 4</td>
  </tr>
</table>


Есть скрипт фильтра по все отрисованной таблице
<script src="../assets/js/filter-table.js" type="text/javascript"></script>
  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        $("#dataList").filterTable("#filter");
      });
    })(jQuery);
</script>


Этот скрипт при вводе текста в поле находит в таблице нужное и все остальные данные прячет.
В свою очередь в таблице текст в каждой строке является ссылкой. чтобы при выборе нужной строки она окрашивалась, чтобы пользователь понимал на какой строке остановился
<tr <?= $datas["id_item"] == $item_id  ? 'style="background: #aecaff;"' : "" ?>>
  <td>
	<a href="page.php?&item_id=<?= $datas["id_item"] ?>" style="color:#000">тут инфа из базы</a>
  </td>
  <td>
	<a href="page.php?&item_id=<?= $datas["comment"] ?>" style="color:#000">тут еще инфа из базы</a></a>
  </td>
</tr>


вопрос вот в чем. Мы нашли нужную строку по фильтру и кликнули ее. Страница обновилась и фильтр сбросился. при этом искомая строка выделена цветом, как и задумывалось. Но эта строка улетела куда-то далеко вниз.
Как после клика искомой строки и соответственно обновления страницы прокрутить страницу до этой самой строки?
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2024, 16:02
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Надо навешивать на эту строку какой-нибудь класс. Например selected
Что то типа такого
<tr <?= $datas["id_item"] == $item_id  ? 'class="selected" style="background: #aecaff;"' : "" ?>>

А потом когда страница загрузится, найти эту строку по классу и скролиться к ней
const selrow = document.querySelector('.selected');
selrow?.scrollIntoView();
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Корректное удаление строки из таблицы Alex57B Элементы интерфейса 4 16.09.2018 23:48
Показать не пустые строки таблицы rodiony4 Элементы интерфейса 4 19.09.2016 17:33
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 22:53
Получение данных из строки таблицы idShura AJAX и COMET 3 30.05.2014 16:39
Как реализовать скроллинг в Div-е до указанной строки таблицы. Shabol Элементы интерфейса 3 24.09.2010 14:19