IndexedDB записи выводятся в HTML-таблицу. Как получить доступ к ячейкам или строкам таблицы?

Question

[Andrey Plax]

function displayRecords() {
    var transaction = db.transaction(["goods"], "readonly");
    var content = "<table>";
    transaction.oncomplete = function (event) {
        console.log("All done!");
        var records = document.getElementById("recordsList");
        records.innerHTML = content;
    };
    var objectStore = transaction.objectStore("goods");
    objectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            content += "<tr>";
            content += "<td>" + cursor.value.a + "</td>";
            content += "<td>" + cursor.value.b + "</td>";
            content += "<td>" + cursor.value.c + "</td>";
            content += "</tr>";
            cursor.continue();
        }
        else {
            content += "</table>";
        }
    };
}

Выведенная таблица недоступна событиям страницы. И неотображается во "ViewSourcePage". Она только видна визуально и через "Developers Tools" браузера. Как прописать в таблицу события или отловить onclick элементов этой динамической страницы???
...
Заранее, спасибо огромное за советы!

Answer 1

[Денис Инешин]

Таблица у вас создается динамически, логично что она не видна в исходном коде.
Чтобы можно было кликать по ячейчкам таблицы вы можете поступить 2-я способами:
1. Делегировать события, например так:

$(document.body).on("click", "td", function () {
    // событие будет вызвано по нажатию на любую ячейку из любой таблицы на странице, не важно когда созданной
});

2. Внутри своей функции onsuccess навесить события на каждую вновь созданную ячейку таблицы

Comments

[Andrey Plax]

О! Для моей ситуации - как раз, то что надо! Спасибо огромное!

Answer 2

[evnuh]

Потому что вы изменяете DOM динамически, соответственно и эвенты на них можно повесить только после их появления в DOM, а вы небось при загрузке страницы пытаетесь их повесить.
И логично, что в исходном коде страницы её не будет, т.к. веб-сервер ничего не знает про вашу таблицу. Про неё знает только браузер.

Comments

[Andrey Plax]

Согласен. Так а как всё-таки события правильно навесить на таблицу?

[Andrey Plax]

как вариант, при построениее в каждой строке:
onclick="javascript:myEditFunc(' + id + ')"
но "onclick="javascript: " - вроде бы как не сильно хорошо...