Как реализовать переключение индексов в JavaScript?

Оффтоп javascript
1

Привет, народ! У меня возникла проблема с функцией переключения в JavaScript. Я пытаюсь создать всплывающее окно, в котором по клику на заголовок таблицы показываются только соответствующие строки.

Использую индексы для идентификации элементов, например, tableheader{{@index}} и tablebody{{@index}}. При клике на заголовок отображаются только строки тела с нужными индексами.

Основная проблема в том, что если не использовать индексы, id начинают повторяться, и строки не показываются корректно. Подскажите, как лучше организовать эту логику? Буду очень благодарен за помощь!

2

Для решения этой задачи можно использовать атрибуты data-* вместо индексов. Например, data-header-id и data-body-id. Так можно связать заголовки и строки без повторения id. А в JavaScript обрабатывать клики и фильтровать строки по значению data-атрибута. Это более гибкий подход. Как думаешь, подойдет для твоего случая?

3

Я бы посоветовал использовать делегирование событий. Навесь один обработчик на контейнер таблицы и проверяй, на каком элементе произошёл клик. Для связи заголовков и строк можно юзать data-атрибуты. Типа так:

table.addEventListener('click', e => {
  if (e.target.matches('th')) {
    const id = e.target.dataset.id;
    const rows = table.querySelectorAll(`tr[data-id=\"${id}\"]`);
    // Показываем нужные строки
  }
});

Такой подход будет работать даже если элементы добавляются динамически.

4

слушай, я тут подумал - может тебе попробовать использовать объект Map для хранения связей между заголовками и строками? типа так:

const tableMap = new Map();
tableMap.set('header1', ['row1', 'row2']);
tableMap.set('header2', ['row3', 'row4']);

потом при клике на заголовок просто берёшь нужные строки из Map и показываешь их. никаких повторяющихся id, всё четко структурировано. плюс легко добавлять/удалять элементы если надо. как думаешь, может прокатить такой вариант?