jQuery: Thay đổi màu viền của tế bào ONE bảng

Question

Tôi có một bảng HTML đơn giản các tùy chọn ở đây:

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

CSS với phong cách phù hợp:

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

Trông như thế này:

Khi tôi nhấp vào một trong các ô trong bảng, tôi muốn đường viền và văn bản màu đỏ. Vì vậy, tôi sử dụng jQuery để chuyển đổi lớp '.selected' bằng cách sử dụng mã sau đây.

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

Tuy nhiên kết quả là thế này:

Các ô trong bảng đầu tiên (màu xanh) là người duy nhất có vẻ như tôi muốn khi chọn. Tôi cần tất cả các đường viền của ô được chọn để được đánh dấu.

Bất kỳ ý tưởng nào về cách đạt được điều này? Tôi không phản đối việc bỏ các bảng nếu ai đó có thể gợi ý một cách tốt hơn.

Answer 1

này hoạt động độc đáo cho tôi:

<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

Dễ dàng đặt DIV vào mỗi ô rồi thêm điều trị vào DIV.

Answer 3

CSS outline có thể hữu ích ở đây, vì nó có thể nằm trên đầu các biên giới khác (đây là vấn đề ở đây).

Answer 4

Đây là rất cách hack thực hiện công việc, có thể tạo ra ý tưởng về kết thúc của bạn để sản xuất một cái gì đó tốt hơn ... Tôi chưa thử nghiệm đầy đủ trên các trình duyệt nhưng làm việc trên IE8, chrome, 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; 
}