html5 table onclick,JavaScript table onclick

I'll update with a method to toggle the highlight to only one cell.

EDIT

Ok, here is a method to remove the blue class and add it to the one which was clicked:

// Remember el.attachEvent('onclick', ...) for IE8 and lower

base.addEventListener('click', function delegate(e){

var cells = tbody.getElementsByClassName('blue'),

i = 0,

cell;

while (cell = cells[i++]) {

cell.className = cell.className.replace(/\bblue\b/g, '');

}

e.target.className += ' blue';

});

This uses el.getElementsByClassName(), which is supported by most modern browsers and IE9 and greater. An alternative, of course, could be to do another tbody.getElementsByTagName('td'), which is universally supported.

EDIT 2

Note, I noticed sometimes it's possible not to click a TD, so we should first check for that and ignore the click on table if it's not a td:

base.addEventListener('click', function delegate(e){

var cells = tbody.getElementsByClassName('blue'),

i = 0,

cell;

if (e.target.nodeName.toLowerCase() == 'td') {

while (cell = cells[i++]) {

cell.className = cell.className.replace(/\bblue\b/g, '');

}

e.target.className += ' blue';

}

});

HTML

Javascript

var base = document.getElementById('base'),

tbody = base.getElementsByTagName('tbody')[0],

numrows = 30,

numcols = 10,

col = 0,

row = "

{row}",

rows = "",

cell = "

{cell}",

cells = "";

// Remember el.attachEvent('onclick', ...) for IE8 and lower

base.addEventListener('click', function delegate(e){

e.target.style.backgroundColor = 'blue';

});

while (numrows--) {

cells = "";

col = 0;

while (col++ < numcols) {

cells += cell.replace('{cell}', col);

}

rows += row.replace('{row}', cells);

}

tbody.innerHTML = rows;