Question

Is there a JavaScript event which is fired when a <tr> is inserted in a <table>?

Or alternatively, is it possible to create a function which will process elements, as they are added or changed? Similar to how jQuery live function can propagate click handlers for existing and future elements inside a certain parent element.

Background: I have a table (jQuery DataTables) which is loaded on startup, and then edited locally (certain classes can be added or removed from it). The problem is, I would like to add a certain class to each row based on its contents.

Answer 1

You must be looking for something like this:

DOMNodeInserted: Fired when a node has been added as a child of
another node. This event is dispatched after the insertion has taken
place. The target of this event is the node being inserted.

Using it would go something like this:

$("table").addEventListener("DOMNodeInserted", function(event) {
    alert("something has been inserted");
    console.log(event.target)
});

(I haven’t tested it, but it should be the way to go)

I’d like to add that if you’re trying to do this, you probably have some kind of weirdness in your code. There must be a simpler way, maybe going through a simple addRow(row) method that would trigger events ?