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

这是一种非常 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;
}

Answer 3

在每个细胞中放置DIV然后将治疗添加到DIV中会更容易。

Answer 4

CSS outline在这里可能很有用，因为它可能位于其他边框之上（这是问题）。