JQuery: change cell border color ONE

Question

I have a simple table of HTML options:

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

CSS with related styles:

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

It looks like:

When I click on one of the cells in the table, I want the border and text to be red. Therefore, I use jQuery to switch the .selected class using the following code.

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

However, the result is the following:

The first cell of the table (blue) is the only one that looks the way I want it when it is selected. I need to select all the borders of the selected cell.

Any ideas on how to achieve this? I don't mind splitting tables if someone can suggest a better way.

Answer 1

This works well for me:

<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

, , - ... , IE8, , FF.

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

It’s easier to put a DIV in each cell, then add processing to the DIV.

Answer 4

CSS can be useful here outline, as it can be on top of other borders (which is the problem here).