Table experimentation
Experimenting with tables a bit, to add rows and columns and edit table cells on click.
Not completed.
HTML
<button id="addrow_button" >Add row</button>
<button id="addcolumn_button" >Add column</button>
<span id="info">0 rows, 0 columns</span>
<div id="tableholder">
<table id="thetable">
</table>
</div>
CSS
td { border: solid 1px #555; padding:6px; }
JavaScript
var TABLE_EDITOR = {
'data': [],
'rowCount': 0,
'colCount': 0,
'addrow': function() {
this.data[this.rowCount] = [];
var newRow = document.createElement('tr');
var newCol;
for (a = 0; a < this.coll;skjf;lskjCount; a += 1) {
this.data[this.rowCount][a] = {
'value': '',
'black': false
};
newCol = document.createElement('td');
newCol.innerHTML = '';
newCol.setAttribute('onclick', 'TE.toggleColor(this)');
newRow.appendChild(newCol);
}
this.rowCount += 1;
document.getElementById('thetable').appendChild(newRow);
},
'addcol': function() {
var tableRows = document.getElementById('thetable').getElementsByTagName('tr');
var newCol;
for (a = 0; a < this.rowCount; a += 1) {
this.data[a][this.colCount] = {
'value': '',
'black': false
};
newCol = document.createElement('td');
newCol.innerHTML = '';
newCol.setAttribute('onclick', 'TE.toggleColor(this)');
tableRows[a].appendChild(newCol)
}
this.colCount += 1;
},
'getCell': function(el) {
var thisRow = el.parentNode;
var thisCell = {
row: 0,
column: 0
};
for (a = 0; a < this.rowCount; a += 1) {
if (document.getElementById('thetable').getElementsByTagName('tr')[a] === thisRow) {
thisCell.row = a;
break;
}
}
for (a = 0; a < this.colCount; a += 1) {
if (thisRow.getElementsByTagName('td')[a] === el) {
thisCell.col = a;
break;
}
}
return this.data[thisCell.row][thisCell.col];
},
'toggleColor': function(el) {
var theCell = this.getCell(el);
if (theCell.black) {
theCell.black...