• Home
• News
• FAQ
• Documentation
• Community
• Contribute
• About

joon hee - Animation.Tabular-1.201

    window["mytable"] = new Widget.Table("mytable", 8, 8);
    
    window.onload = function() {
                
        document.body.innerHTML += mytable.getHTML( function(point) {
                        return "<td>" + (point.x * point.y).toString() + "</td>";
                });
                
                var row = mytable.getRow(0);
                row.forEach( function(cell) {
                        alert(cell.innerHTML);
                });
                
        }

        this.getCell(5); // Gets the fifth cell

        this.getCellByPoint({ x: 2, y: 3 });

        var cells = this.getRow(5);

        var cells = this.getRow(6);

        var cells = this.getDiagonal(4,false);

Class('Widget.Table', {
	
	constructor: function(id,tablewidth,tableheight) {
		this.id = id;
		this.tablewidth = tablewidth;
		this.tableheight = tableheight;
	},
	
	has: {
		id: {},
		tablewidth: {},
		tableheight: {}
	},
	
	methods: {
		
		createHTML: function(func) {
			
			var x, y,
				tableHTML = "<table border='0' id='" + this.id + "'>";
				width     = this.tablewidth;
				height    = this.tableheight;
			
			for (x = 0; x < width; x++) {
			
				tableHTML += "<tr>";
			
				for (y = 0; y < height; y++) {
					
					tableHTML += func({x:x,y:y});
					
				}
			
				tableHTML += "</tr>";
				
			}
			
			tableHTML += "</table>";
			
			return tableHTML;
			
		},
		
		getCell: function(cellNumber) {
			
			var tableElement = document.getElementById(this.id),
				cells        = tableElement.getElementsByTagName("td");
			
			return cells[cellNumber-1];
			
		},
		
		getCellByPoint: function(point) {
			return this.getCell(point.y*this.tablewidth + point.x + 1);
		},
		
		getRow: function(rowNumber) {
			
			var x, y = rowNumber,
				row   = [];
				width = this.tablewidth;
			
			for (x = 0; x < width; x++) {
				row[row.length] = this.getCellByPoint({x:x,y:y});
			}
			
			return row;
			
		},
		
		getColumn: function(columnNumber) {
			
			var x = columnNumber, y,
				column = [];
				height = this.tableheight;
			
			for (y = 0; y < height; y++) {
				column[column.length] = this.getCellByPoint({x:x,y:y});
			}
			
			return column;
			
		},
		
		getDiagonal: function(val, dtype) {
			
			var i, elem,
				rval = [],
				size = this.tablewidth,
				type = ( !dtype || dtype === "-1") ? false : true,
				
				// Setup the conditions of going backwards or forwards:
				inc = type ? 1 : -1, 
				start = type ? 0: (size -1),
			
				cond = function(i) {
					return type ? i < size : i >= 0;
				},
			
				func = function(size, i) {
					return type ? (i + 1) : (size - i);
				};
			
			for (i = start; cond(i); i += inc) {
				
				elem = this.getRow(func(size, i))[i + val];
				
				if (typeof elem !== "undefined") {
					rval.push(elem);
				}
			
			}
			
			return rval;
			
		}
		
	}
	
});




/*

=pod

=head1 NAME

Widget.Table - a wrapper around an HTML Table element.

=head1 VERSION

Version 1.2

=head1 SYNOPSIS

    window["mytable"] = new Widget.Table("mytable", 8, 8);
    
    window.onload = function() {
		
    	document.body.innerHTML += mytable.getHTML( function(point) {
			return "<td>" + (point.x * point.y).toString() + "</td>";
		});
		
		var row = mytable.getRow(0);
		row.forEach( function(cell) {
			alert(cell.innerHTML);
		});
		
	}

=head1 DESCRIPTION

This is a class for dealing with HTML tables from within JavaScript.

=head1 DEPENDENCIES

None.

=head1 ATTRIBUTES

=head2 tablewidth

This is the width of the table.

=head2 tableheight

This is the height of the table.

=head2 id

This is the identifier, or the id used on the coressponding table element.

=head1 METHODS

=head2 getCell(no)

This function is called whenever you want to reference a cell within the table element. This function
merely uses getElementsByTagName("td") from the table element and then references the index that is
the value no. This function then returns the corresponding td element.

	this.getCell(5); // Gets the fifth cell

=head2 getCellByPoint(point)

This function returns the cell from the points x and y properties.

	this.getCellByPoint({ x: 2, y: 3 });

=head2 getRow(row)

This function returns a row of td elements from the table.

	var cells = this.getRow(5);

=head2 getColumn(col)

This function returns a column of td elements from the table.

	var cells = this.getRow(6);

=head2 getDiagonal(val, dtype)

This function returns a diagonal based on dtype, dtype is either true or false. If dtype is true
then it will take a positive slope, otherwise a negative slope is taken, an array of td elements
are returned from this function.

	var cells = this.getDiagonal(4,false);

=head1 AUTHORS

Jhuni, <jhuni_x@yahoo.com>

=head1 COPYRIGHT

Public Domain

=cut

*/