Cómo cambio el color de la celda de la tabla HTML al hacer clic en

Question

Estoy intentando cambiar el color de fondo de una celda de tabla HTML cuando el usuario hace clic en la celda. ¿Alguna idea sobre cómo hacer esto? Tengo acceso a la biblioteca JS Prototype, por lo que cualquier sugerencia para Prototype o Javascript directo sería bienvenida.

Answer 1

feo, pero demuestra el efecto:

<table> 
    <tr> 
     <td onclick="this.style.backgroundColor = 'Red';">Sample</td> 
     <td onclick="this.style.backgroundColor = 'Blue';">Data</td> 
    </tr> 
    </table> 

Answer 2

No estoy muy versado en el marco del prototipo, pero aquí hay algo de Javascript prima que va a hacer lo que está buscando:

var table = document.getElementsByTagName('table')[0]; 
if(table) table.onclick = function(e) { 
    var target = (e || window.event).target; 
    if (target.tagName in {TD:1, TH:1}) 
     target.setAttribute('style', 'background-color: #F00'); 
};​ 

probarlo en jsFiddle

Answer 3

se podría bucle sobre todos los hijos de la tabla y añadir un evento de clic a ellos

con el código prototipo es:

$('your_table').observe('click', function(event) { 
    var clickedCell = event.findElement('td'); 
    if (clickedCell) { 
    clickedCell.setStyle({ background: '#dfd' }); 
    } 
});