Jak zmienić kolor komórki tabeli HTML na kliknij

Question

Próbuję zmienić kolor tła komórki tabeli HTML, gdy użytkownik kliknie komórkę. Wszelkie pomysły, jak to zrobić? Mam dostęp do biblioteki Prototypu JS, więc wszelkie sugestie dotyczące prototypu lub prostego kodu JavaScript byłyby mile widziane.

Answer 1

brzydki, ale demonstruje efekt:

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

Answer 2

Nie jestem dobrze zorientowany w ramach prototyp, ale tutaj jest trochę surowy Javascript, że zrobi to, czego szukasz:

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'); 
};​ 

przetestować go na jsFiddle

Answer 3

Mogłeś pętla nad wszystkimi dziećmi w tabeli i dodać zdarzenie click do nich

z prototypem kod jest:

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