A
A
Andrey Plax2015-05-19 13:49:57
JavaScript
Andrey Plax, 2015-05-19 13:49:57

IndexedDB records are output to an HTML table. How to access cells or rows of a table?

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>";
        }
    };
}

The rendered table is not available to page events. And it is not displayed in "ViewSourcePage". It is only visible visually and through the "Developers Tools" of the browser. How to register events in the table or catch onclick of elements of this dynamic page???
...
In advance, thanks a lot for the advice!

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Denis Ineshin, 2015-05-19
@Hereigo

Your table is created dynamically, it is logical that it is not visible in the source code.
To be able to click on the cells of the table, you can do it in 2 ways:
1. Delegate events, for example:

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

2. Inside your onsuccess function, hang events on each newly created table cell

E
evnuh, 2015-05-19
@evnuh

Because you change the DOM dynamically, respectively, and events can be hung on them only after they appear in the DOM, and you probably try to hang them when loading the page.
And it is logical that it will not be in the source code of the page, because the web server knows nothing about your table. Only the browser knows about it.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question