I have tried tried the solution using JQuery/Javascript
jQuery
$('td').click(function() {
$(this).css('backgroundColor', '#000');
});
...or....
$('table').on('click', 'td', function() {
$(this).css('backgroundColor', '#000');
});
JavaScript
var td = document.getElementsByTagName('td');
var changeStyle = function (element) {
element.style.backgroundColor = '#000';
}
for (var i = 0, length = td.length; i < length; i++) {
if (td[i].addEventListener) {
td[i].addEventListener("click", function() {
changeStyle(td[i]);
}, false);
} else if (td[i].attachEvent) {
td[i].attachEvent("onclick", function() {
changeStyle(td[i]);
});
} else {
td[i].onclick = function() {
changeStyle(td[i]);
};
}
}
...or...
var table = document.getElementsByTagName('table')[0];
var changeStyle = function(e) {
e = e || window.event;
var element = e.target || e.srcElement;
element.style.backgroundColor = '#000';
}
if (table.addEventListener) {
table.addEventListener("click", changeStyle, false);
} else if (table.attachEvent) {
table.attachEvent("onclick", changeStyle);
} else {
table.onclick = changeStyle;
}
jQuery
$('td').click(function() {
$(this).addClass('active');
);
...or....
$('table').on('click', 'td', function() {
$(this).addClass('active');
});
CSS
td.active {
background: #000;
}
The reason this didn't work...
<table><tbody><tr><td style="background-color:white">
onclick="$(this).onmouseover('background-color','black')">
SomeText
</td></tr></tbody></table>