Problem with binding an HTML <table > EventListener to an object method

Hello all,

I am attempting to code a 'Table Manager' object that manages all user inputs e.g. mouseclicks, cell text changes etc, of an HTML table.

Essentially I wish the code to instantiate my TableManager 'class' and then utilise the 'TableManager.setTable()' method to associate the TableManager object with the particular HTML table. Also in this 'setTable' method I wish to set the EventListeners as necessary without the need for further code (external to the Table Manager object) to bind Events to TableManager methods. However I'm running into some problems when I attempt to bind to a table event within the TableManager's 'setTable' method.

Code follows :

First the 'init' javascript function that is called 'onload' by the HTML page (not shown, but it contains a table whose id is 'mytable')

function tableinit(){
	tm = new TableManager();
	tm.setTable(document.getElementById("mytable"));
}

Code (markup):

o.k and now my table manager code :

function TableManager(){
// Constructor for the manager.
	this.table = null;
};

TableManager.prototype.addRow = function(){
	var newRow = this.table.insertRow(0);
};

TableManager.prototype.setTable = function(tble){
	this.table = tble;
	this.table.addEventListener("click",[B]this.tableClicked()[/B],false));
};

TableManager.prototype.tableClicked = function(){
        alert('Table clicked');
};

Code (markup):

The problem lies where I have used 'this' as highlighted above to try and bind the 'click' event to that particular TableManager's tableClicked method.

Does anyone know the correct way to do this / point out the error of my ways ?

Many thanks

kb

 

I should make it clear that the problem I'm having is as follows :

When the 'tableClicked' method is called (due to a mouse click) I want the 'this' keyword to refer to the TableManager NOT the table.

I can't work out how to attach the event using the method 'setTable' of the TableManager TO the method tableClicked of the TableManager and have 'this' refer to the TableManager when tsbleClicked is called.