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>