Проблема со сканированием обновленных данных таблицы в SPA с помощью JavaScript

Я разрабатываю сканер для службы, построенной как одностраничное приложение (SPA).

Я не уверен, используется ли платформа React, Angular или что-то еще. Мой сканер взаимодействует с таблицей, которая отображается после нажатия кнопки с идентификатором queries-process-button. У таблицы есть класс i3WFpf.

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

Интересно, что когда я перезагружаю всю страницу и затем просматриваю новую таблицу, извлекаются правильные данные. Но опять же, проблема сохраняется, когда я пытаюсь просканировать любую последующую таблицу.

Вот фрагмент кода, который я использую в консоли браузера:

const table = document.querySelector('table.i3WFpf');

if (table) {
    const rows = table.rows;

    for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].cells;
        let rowData = [];
        for (let j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText); 
        }
        console.info(`Row ${i + 1}:`, rowData);
    }
} else {
    console.info("Table with class 'i3WFpf' not found.");
}

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

Есть ли способ гарантировать, что сканер всегда извлекает самые последние данные, отображаемые в таблице, особенно в контексте SPA?

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.


50
1

Ответ:

Решено
const table = document.querySelector('table.i3WFpf');

querySelector вернет только первый элемент, соответствующий селектору.

Если сайт, который вы хотите очистить, загружает дополнительные данные в таблицу, соответствующую тому же селектору, и только скрывает исходную таблицу, но сохраняет ее в DOM — тогда вам нужно переключиться на использование querySelectorAll, а затем выбрать последнюю (предположительно? ) соответствующий элемент, который он находит.