This script creates a table with divs. It floats the cells horizontally. It's crude simple and yet robust table code. When you click on a cell it's color will toggle between red and green (starts grey). When you click on a column or row head, the entire column or row will toggle. When you click on the top-left most cell, the entire table will toggle (for each cell individually).
I was working on this while creating a meeting planner I'm working on right now but once I was done with the basics I figured I had just created a complete basic table, so I might as well post it. Maybe someobody can find a use for it.
var CELL_ALL = 1;
var CELL_DAY = 2;
var CELL_HOUR = 3;
var CELL_DATA = 4;
function createPlanner(numrows, numcols) {
var e,f,g; // only used for temporary element lookup results
f = document.createElement("DIV");
f.id = 'timetable';
// save this for easy reference
f.numrows = numrows;
f.numcols = numcols;
// these two variables allow for very fast table lookup of all the elements of a single row/column
// only put data cells in here...
f.columns = new Array();
f.rows = new Array();
// create an array for each row/column
// (sure we can do it later but it makes the source easier to understand when we put it here and not much slower)
for (var i=0; i f.columns.push(new Array());
}
// and for each row
for (var i=0; i f.rows.push(new Array());
}
// now we dont have to worry about initialization when creating the data elements
// create tablehead
e = document.createElement("DIV");
e.className = 'divhead';
e.style.width = ((numcols+1) * 41)+'px';
e.style.height = '21px';
// add the top-left cell
g = document.createElement("DIV");
g.innerHTML = 'all';
g.title = 'Click here to toggle ALL fields\n (erases current selection)!';
g.onclick = onAllCellClick;
g.planner = CELL_ALL;
e.appendChild(g);
// add head elements to the table
for (var column=0; column g = document.createElement("DIV");
g.innerHTML = 'col';
g.onclick = onColumnCellClick;
g.planner = CELL_DAY;
g.column = column;
e.appendChild(g);
}
f.appendChild(e);
// now create table body
e = document.createElement("DIV");
e.className = 'divtable';
e.style.width = ((numcols+1) * 41)+'px';
e.style.height = ((numrows) * 21)+'px';
// add the elements in a horizontal fashion
for (var row=0; row // first the left cell of a row
g = document.createElement("DIV");
g.innerHTML = 'row';
g.onclick = onRowCellClick;
g.planner = CELL_HOUR;
g.row = row;
e.appendChild(g);
// now all the data cells for that row, one for each column
for (var column=0; column g = document.createElement("DIV");
g.innerHTML = (row*numcols)+column+'';
// only give data cells the onDataCellClick event
g.onclick = onDataCellClick;
// these variables are for our application
g.planner = CELL_DATA;
g.row = row;
g.column = column;
// and this is for fast lookup mechanisms
f.rows[row].push(g);
f.columns[column].push(g);
// now add it to the 'table'
e.appendChild(g);
}
}
f.appendChild(e);
return f;
}
function onDataCellClick(event) {
if (this.style.backgroundColor == 'red') this.style.backgroundColor = 'green';
else this.style.backgroundColor = 'red';
}
function onColumnCellClick(event) {
// ok the column cells are located at the grandparent of this (or in id=timetable...)
var timetable = this.parentNode.parentNode;
// get the cells of this column
var cells = timetable.columns[this.column];
// hm, simply toggle all cells?
for (var cell=0; cell // simply use our own click function
cells[cell].onclick();
}
}
function onRowCellClick(event) {
// ok the row cells are located at the grandparent of this (or in id=timetable...)
var timetable = this.parentNode.parentNode;
// get the cells of this row
var cells = timetable.rows[this.row];
// hm, simply toggle all cells?
for (var cell=0; cell // simply use our own click function
cells[cell].onclick();
}
}
function onAllCellClick(event) {
// get the table element
var timetable = this.parentNode.parentNode;
// now simply call the click method on each cell of the head (could just as well do it for row though)
for (var row=0; row // simply use our own click function
for (var column=0; column timetable.rows[row][column].onclick();
}
}
}
.divhead {
background-color: #ccc;
}
.divtable {
background-color: #ccc;
}
.divhead div, .divtable div {
border: 1px solid black;
border-left: 0;
border-top: 0;
width: 40px;
height: 16px;
padding-top: 4px;
float: left;
cursor: pointer;
text-align: center;
font-size: 11px;
}
.divhead div:hover, .divtable div:hover {
background-color: #aaa;
}
To use, simply call the creating function:
var divtable = createDivTable(x,y);
document.body.appendChild(divtable);
This will add the table to the body (of course you can change this as you please, the function will simply return a DIV element, like document.getElementById() returns, that contains the table).
Where x and y are the number of rows and columns you want respectfully. Don't forget to add the CSS somewhere.
This table was tested and worked properly in IE7, Firefox 2.0.0.16 and Opera 9.26 at the time of writing :)