Colorear celdas

[marielapg84]

Tengo una tabla, que colorea la fila y vuelve a su color cuando paso el mause pero ademas quiero que al darle click mantenga el color como puedo hacerlo ya que mi codigo tambien cambia de color cuando le doy click pero con los eventos del mause pierde el color

[Alexis88]

Una solución (entre las tantas que se pueden crear) para lo que buscas, es trabajar con atributos personalizados. Puedes asignar un atributo "data-click", el cual manejará dos valores; 1 y 0. Cuando le des un clic a la fila, se asigna el valor 1, esto es para que cuando pasemos el puntero del mouse sobre dicha fila y luego lo retiremos, no cambie el color que tomó, pero si le damos otro clic, el valor del atributo "data-click" será igual a cero y sí podrá cambiar el color al retirar el puntero del mouse de la fila en cuestión.

Código Javascript:

var filas = document.getElementsByTagName("tr"),
    total = filas.length;
 
for (i = 0; i < total; i++){
    filas[i].addEventListener("mouseover", function(){
        this.style.background = "red";
    }, false);
    
    filas[i].addEventListener("mouseout", function(){
        if (!this.getAttribute("data-click") || this.getAttribute("data-click") == 0)
            this.style.background = "white";
        console.log(this.getAttribute("data-click"));
    }, false);
    
    filas[i].addEventListener("click", function(){
        if (!this.getAttribute("data-click") || this.getAttribute("data-click") == 0)
            this.setAttribute("data-click", 1);
        else
            this.setAttribute("data-click", 0);
    }, false);
}
 

DEMO: http://jsfiddle.net/Wj7Fj/

Saludos