Question

I’ve developed some javascript which generates a dynamic table from an array, then allows the user to edit the data. This works perfect.

Now I want to do use this code 3 times on the same HTML page. At the moment it depends on two variables: metadata, which describes the header format and is read only and the same for all three occasions, and ‘data’ which actually holds the data for the table.

Rather than having three copies of the code for each instance, I’m thinking it would be better to have an object which keeps everything internal and simply has ‘setData’ and ‘getData’ methods.

Existing code dynamically creates onclick events – how to get these to reference the objects function, rather than a global function? (ie, there is currently functions like ‘RemoveRow(index)’, which I assume will be ‘obj.RemoveRow(index)’. I would love to do this in jquery but alas, I wouldn’t know the rowindex to pass in then, unless someone has a solution. Perhaps store it somewhere inside the DOM and access it somehow to determine the row being clicked on?

Is it possible to pass a reference to an array? It would be much better if the object could manipulate the array passed in rather than making a copy to work on and then the caller having to copy that back to its own array.

Answer 1

So this is very raw code and only one of multiple options, but maybe you get the idea:

Create an object that handles a single table

function TableControl () {
    // dom elements
    this.table = null;
    this.rows = null;
    // values
    this.id = null;
    // create new row
    this.insertRow = function() {
        // some logic
        this.table.append( 'new row goes here' );
    },
    // load table object and rows and stuff
    this._initiate = function() {
        //create object with all passed arguments
        var args = arguments[0] || {};

        // set internal values
        this.id = args.id;

        // get dom elements
        this.table = $('#' + this.id);
        this.rows = this.table.find('tr');
    },
    this._initiate( arguments[0] );
}

Create instances of that object using the id of each table

var table_1 = new TableConrol({ id: 'table_1' });
var table_2 = new TableConrol({ id: 'table_2' });
var table_3 = new TableConrol({ id: 'table_3' });

So each table handles only stuff within it’s own “scope”, like adding new rows for example:

table_1.insertRow();