I have a plugin that shows/hides columns in a table.

However I also use several other plugins on the table, hence the table is quite dynamic.

I am looking for a way to monitor the table for whenever something happens to it.

eg,

rows are added, rows are removed, rows are hidden...

is there a general .change() event for any dom element?

I have a plugin that shows/hides columns in a table.

However I also use several other plugins on the table, hence the table is quite dynamic.

I am looking for a way to monitor the table for whenever something happens to it.

eg,

rows are added, rows are removed, rows are hidden...

is there a general .change() event for any dom element?

• javascript
• jquery
• dom

3 Answers 3

You could bind to DOM events:

$(document).ready(function(){
    $(document).bind('DOMNodeInserted', function(event){
        console.log('inserted '+event.target.nodeName + ', parent: '+event.relatedNode.getAttribute('id'));
    });
    $(document).bind('DOMNodeRemoved', function(event){
        console.log('removed');
    });
    $(document).bind('DOMSubtreeModified', function(event){
        console.log('modified '+event.target.getAttribute('id'));
    });

    $('#tbl').append($('<tr></tr>').
                    attr('id', 'newrow'));
});

Fiddle here

Of course, your elements would have to be given identifiers to make this useful at all.

You can use livequery to detect when rows have been added/removed:

$("tr").livequery(function() {
  console.log($(this) + " was added");
}, function() {
  console.log($(this) + " was removed");
});

Unfortunately there is not a cross-browser change event for the manipulation of the DOM. You have a couple options:

1. Use the functions that manipulate the table to also do your other actions.
2. Create a pub/sub system to publish and subscribe to your own custom table events.