Блог

Главная - Вопросы по программированию - Использовать содержимое динамической таблицы html

Использовать содержимое динамической таблицы html

#javascript #html

#javascript #HTML

Вопрос:

Я динамически обновил содержимое своей таблицы html. Теперь, когда я пытаюсь получить доступ ко всем кнопкам в этой таблице с помощью javascript, я получаю пустой список. Но если я добавлю в эту таблицу прослушиватель событий, например, при наведении курсора мыши, он вернет мне все кнопки. Что я могу сделать, чтобы иметь все кнопки после загрузки Dom?

 //build list of booking
async function get_booking() {
    let res = await fetch('http://127.0.0.1:8000/api/booking/today/');
    let data = await res.json();


    //build table
    const len = data.length;
    if (len > 0) {
        for (let i = 0; i < len; i  ) {
            document.querySelector('tbody').innerHTML  = `
            <tr>
                <td>${data[i].id}</td>
                <td data-agent ="${data[i].coy}" >${data[i].name}</t>
                <td data-trip="${data[i].trip}">${data[i].trip}</td>
                <td data-busstop="${data[i].bus_stop}" >${data[i].bus_stop}</td>
                <td data-startdate="${data[i].start_date}">${data[i].start_date}</td>
                <td data-end="${data[i].end_date}">${data[i].end_date}</td>
                <td data-departure="${data[i].departure}">${data[i].departure}</td>
                <td><button class="update" data-booking="${data[i].id}" type="submit"><i class="fa fa-edit"></i></button></td>
            </tr>`;
        }
    }

}

//использовать содержимое таблицы

 const tbody = document.querySelector('tbody');
const btns = tbody.querySelectorAll('button');

Комментарии:

1. пожалуйста, опубликуйте фактический код, вы никогда не вызываете get_booking

2. вызывайте tbody.querySelectorAll('button'); всякий раз, когда вы хотите получить доступ к кнопкам, вместо того, чтобы полагаться на первоначальный вызов. Или сделать btns редактируемым ( использовать let ) и обновить его в конце get_booking

3. document.addEventListener(‘DOMContentLoaded’, () => { пусть tb = document. Выбор запросов (‘tbody’); tb.addEventListener(«, () => { console.log(tb.querySelectorAll(‘button’)); }) console.log(tb.rows); // получить все бронирования, созданные сегодня get_booking(); }

4. document.addEventListener(‘DOMContentLoaded’, () => {const tb = document. querySelector(‘tbody’); пусть btns = tb.querySelectorAll(‘button’); //получить все созданные сегодня бронирования get_booking(); btns = tb.querySelectorAll(‘button’); console.log(btns);} Габриэле Петриоли, это так?

5. он по-прежнему выдает мне пустой список

Ответ №1:

Я не вижу, где вы используете querySelectorAll . Вероятно, он вызывается до завершения get_booking() . Возможно, вы могли бы вызвать его в конце get_booking() .

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

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

 // build list of booking
async function get_booking() {
    let res = await fetch('http://127.0.0.1:8000/api/booking/today/');
    let data = await res.json();

    for (let i = 0; i < data.length; i  ) {
        document.querySelector('tbody').innerHTML  = `
            <tr>
                <td>${data[i].id}</td>
                <td data-agent ="${data[i].coy}" >${data[i].name}</t>
                <td data-trip="${data[i].trip}">${data[i].trip}</td>
                <td data-busstop="${data[i].bus_stop}" >${data[i].bus_stop}</td>
                <td data-startdate="${data[i].start_date}">${data[i].start_date}</td>
                <td data-end="${data[i].end_date}">${data[i].end_date}</td>
                <td data-departure="${data[i].departure}">${data[i].departure}</td>
                <td>
                    <button class="update specialButton"
                            data-booking="${data[i].id}" type="submit">
                        <i class="fa fa-edit"></i>
                    </button>
                </td>
            </tr>`;
    }
}

var btns = tbody.querySelectorAll('.specialButton');