Извлечение значений ячеек таблицы с помощью JavaScript

Оффтоп javascript
1

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

function extractTableData() {
    const dataTable = document.getElementById('dynamicTable');
    for (let rowIndex = 0; rowIndex < dataTable.rows.length; rowIndex++) {
        for (let cellIndex = 0; cellIndex < dataTable.rows[rowIndex].cells.length; cellIndex++) {
            alert(dataTable.rows[rowIndex].cells[cellIndex].children[0].value);
        }
    }
}

Как мне заставить document.write() вывести значения всех ячеек? Буду признателен за помощь!

2

Привет, могу подсказать! вместо `document.write()` лучше использовать создание элементов через `createElement`. например, можно сделать так: создаешь пустой div, потом в цикле перебираешь ячейки и добавляешь туда текст. получится более чистый и правильный способ вывода данных.

у меня был похожий проект, и я заметил, что `textContent` работает намного надежнее, чем доступ к чилдренам. короче, экспериментируй и не бойся пробовать разные подходы)

3

Короче, проблема в том, что ты неправильно получаешь значения. Если это input-ячейки, то лучше использовать `.value`, а не `children[0].value`. Можно переписать так: `dataTable.rows[rowIndex].cells[cellIndex].querySelector('input').value`.

Еще совет - не юзай `document.write()`, он давно не актуален. Сделай элемент для вывода и используй `.innerHTML` или `.textContent`. Вообще, для таких задач лучше современные методы - например, `Array.from()` или `.map()`.

4

Можно еще проще! Попробуй использовать querySelector для всей таблицы и map() для перебора. Например: [...dataTable.querySelectorAll('input')].map(input => input.value). Так код будет компактнее и современнее. Главное - не мудри и экспериментируй)