JavaScript присоединить слушателя к столбцу таблицы для сортировки - PullRequest
Новая
       44

JavaScript присоединить слушателя к столбцу таблицы для сортировки

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

У меня есть сортировочный алогит для столбцов таблицы, и я хочу прикрепить слушатель к определенному столбцу, чтобы отсортировать его после щелчка.

Позже я обновляю таблицу, поэтому я (вероятно) нужно удалить предыдущего слушателя и добавить нового. Чтобы удалить предыдущего слушателя, мне нужно иметь ссылку на функцию.

Теперь мой код выглядит так 

function sortTable(elem) {
        console.log('clicked');
        const table = elem.closest('table');
        const tbody = table.querySelector('tbody');
        Array.from(tbody.querySelectorAll('tr:nth-child(n+2)'))
            .sort(comparer(Array.from(elem.parentNode.children).indexOf(elem), this.asc = !this.asc))
            .forEach(tr => tbody.appendChild(tr));
}

, и я называю его так: 

document.querySelectorAll('th').forEach(th => th.addEventListener('click', sortTable));

Но я получаю ошибку 

Uncaught TypeError: elem.closest is not a function
    at HTMLTableCellElement.sortTable

Это работает, когда я использую: 

document.querySelectorAll('th').forEach(th => th.addEventListener('click', function() {
   sortTable(th);
}));

Но, как я уже сказал, мне нужно удалить (или обновить) прослушиватель событий для столбцы таблицы позже, потому что моя таблица динамически меняется. Поэтому мне нужно позвонить примерно так: 

document.querySelectorAll('th').forEach(th => th.removeEventListener('click', sortTable));

// or add listener again with the same function reference, and it will be updated? tell me if I'm wrong

Но я не могу заставить все это работать :(

Можете ли вы мне помочь, пожалуйста?

РЕДАКТИРОВАТЬ: Спасибо для комментария. Теперь это работает. Я изменил sortTable(elem) на sortTable(event) и заменил elem внутри функции на this. Затем я могу вызвать функцию с: 

document.querySelectorAll('th').forEach(th => th.addEventListener('click', sortTable));
...