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> 

Answer 2

在每個細胞中放入DIV更容易，然後將處理添加到DIV。

Answer 3

CSS outline在這裏可能很有用，因爲它可能在其他邊界之上（這裏是問題）。

Answer 4

這是一個非常難完成工作的黑客辦法，可能引發一個想法，在您的最終產生更好的東西...我沒有完全測試它跨瀏覽器，但在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; 
}