jQuery: Cambiar el color del borde de la celda de una tabla

Question

Tengo una tabla HTML sencilla de opciones aquí:

<table> 
    <tr> 
    <td>blue</td> 
    <td>green</td> 
    </tr> 
    <tr> 
    <td>red</td> 
    <td>cream</td> 
    </tr> 
</table> 

El CSS con los estilos pertinentes:

td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; } 
td.selected { color: #D93A2C; border: 1px solid #D93A2C; } 

se ve así:

Cuando hago clic en una de las celdas de la tabla, quiero el borde y el texto debe ser rojo Así que uso jQuery para alternar la clase '.selected' usando el siguiente código.

$('td').each(function(){ 
    $(this).click(function(){ 
     $(this).toggleClass('selected'); 
    }); 
}); 

Sin embargo, el resultado es este:

La primera celda de la tabla (azul) es el único que parece como que quiero cuando seleccionado. Necesito que se resalten todos los bordes de la celda seleccionada.

¿Alguna idea sobre cómo lograr esto? No me opongo a las mesas de abandono si alguien puede sugerir una mejor manera.

Answer 1

Esto funciona muy bien para mí:

<style type="text/css"> 
    table { border: 1px solid #000; border-collapse: collapse; } 
    td { border-top: 1px solid #000; border-left: 1px solid #000; } 
    td.selected { border: 1px solid #F00; } 
</style> 

<table> 
    <tr> 
     <td>blue</td> 
     <td>green</td> 
    </tr> 
    <tr> 
     <td>red</td> 
     <td class="selected">yellow</td> 
    </tr> 
</table> 

Answer 2

Es más fácil poner un DIV en cada celda y luego agregar el tratamiento al DIV.

Answer 3

El CSS outline puede ser útil aquí, ya que puede estar en la parte superior de otros bordes (que es el problema aquí).

Answer 4

Aquí está muy Hack'ish forma de hacer el trabajo, podría provocar una idea de su parte para producir algo mejor ... No lo he probado completamente entre navegadores pero funcionó en IE8, Chrome, FF. Live example

HTML

<table> 
    <tbody> 
     <tr> 
      <td>XYZ</td> 
      <td>asdf</td> 
      <td>2346</td> 
     </tr> 
     <tr> 
      <td>XYZ</td> 
      <td>asdf</td> 
      <td>2346</td> 
     </tr> 
     <tr> 
      <td>XYZ</td> 
      <td>asdf</td> 
      <td>2346</td> 
     </tr> 
    </tbody> 
</table> 

JS

$('td').each(function(){ 
    $(this).click(function(){ 
     $(this).toggleClass('selected'); 
     $(this).prev('td').css('border-right','#ff0000'); 
     $(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000') 
    }); 
}); 

CSS

table{ 
     border-collapse: collapse; 
} 

td { border: 1px solid #ccc; padding:3px } 

.selected{ 
    border-color:#ff0000; 
    color:#ff0000; 
} 
.selected-bottom{ 
    border-bottom-color:#ff0000; 
} 
.selected-right{ 
    border-right-color:#ff0000; 
}