0 Replies - 1342 Views - Last Post: 18 March 2012 - 10:35 AM

#1 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Table Generator

Posted 18 March 2012 - 10:35 AM

Description: var a = [[4,5,2],[9,1,4]]; //data for our table var t = new Table({ id: 'table_id' }); t.setData(a); //set the data here t.display('display_element_id'); //display hereCreates tables using DOM objects and methods
/**
 * Table - Create tables with DOM objects.
 *
 * @param (Array) attributes Object with table attributes such as ID, NAME, etc...
 */
function Table(attributes)
{
    this.table = document.createElement('table');
    
    for(var x in attributes)
        table[x] = attributes[x];
}

/**
 * adds a thead element to the current table
 *  
 * @param (Array) headings
 */
Table.prototype.appendHeader = function(headings) {
    var tr = document.createElement('tr');
    for(var x in headings) {
        var th = document.createElement('th');
        th.appendChild(document.createTextNode(headings[x]));
        tr.appendChild(th);
    }
    var thead = document.createElement('thead');
    thead.appendChild(tr);
    this.table.appendChild(thead);
}

/**
 * append a row of data to the table
 * 
 * @param (Array) row
 */
Table.prototype.appendRow = function(row) {
    var tr = document.createElement('tr');
    for(x in row) {
        var td = document.createElement('td');
        if(!(row[x] instanceof HTMLElement))
            td.appendChild(document.createTextNode(row[x]));
        else
            td.appendChild(row[x]);
        
        tr.appendChild(td);
    }
    
    var tbodies = this.table.getElementsByTagName('tbody');
    var tbody = null;
    if(tbodies.length)
        tbody = tbodies[tbodies.length - 1];
    else {
        tbody = document.createElement('tbody');
        this.table.appendChild(tbody);
    }
    tbody.appendChild(tr);
}

/**
 * append a footer to the table
 * 
 * @param (Array) footer 
 */
Table.prototype.appendFooter = function(footer) {
    var tr = document.createElement('tr');
    for(var x in footer) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(footer[x]));
        
        tr.appendChild(td);
    }
    var tfoot = document.createElement('tfoot');
    tfoot.appendChild(tr);
    this.table.appendChild(tfoot);
}

/**
 * Set data using a multidimensional array
 * 
 * @param (Array) data 
 */
Table.prototype.setData = function(data) {
    for(var x in data)
        this.appendRow(data[x])
}

/**
 * retrieve data from a specific cell in the table
 * 
 * @param (number) x
 * @param (number) y 
 */
Table.prototype.getData = function(x, y) {
    return this.table.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[x].getElementsByTagName('td')[y].innerHTML;
}

/**
 * display the table
 * 
 * @param (mixed) element 
 */
Table.prototype.display = function(element) {
    if(element instanceof HTMLElement)
        element.appendChild(this.table);
    else
        document.getElementById(element).appendChild(this.table);
}


Is This A Good Question/Topic? 0
  • +

Page 1 of 1