JQuery: Изменить цвет рамки ONE ячейки таблицы

Question

У меня есть простой HTML таблица вариантов здесь:

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

CSS-с соответствующими стилями:

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

выглядит следующим образом:

Когда я нажимаю на одну из ячеек таблицы, мне нужна граница и текст будет красным. Поэтому я использую jQuery для переключения класса .selected, используя следующий код.

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

Однако результат:

Первая ячейка таблицы (синий) является единственным, который выглядит так, как я хочу, когда выбран. Мне нужно выделить все границы выделенной ячейки.

Любые идеи о том, как достичь этого? Я не против столов, если кто-то может предложить лучший способ.

Answer 1

Это хорошо работает для меня:

<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

Легче поставить DIV в каждую ячейку, затем добавить обработку в DIV.

Answer 3

Здесь может быть полезен CSS outline, так как он может быть поверх других границ (что является проблемой здесь).

Answer 4

очень hack'ish способ получить работу, может исправить идею на вашем конце, чтобы произвести что-то лучшее ... Я не тестировал ее полностью в браузерах, но работал над IE8, хром, 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; 
}