javascript - jQuery:更改一个表格单元格的边框颜色

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>