jQuery를 : 여기 옵션의 간단한 HTML 테이블이

Question

ONE 테이블 셀의 테두리 색상을 변경합니다

<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이 유용 할 수 있습니다 (여기서는 문제입니다).

Answer 4

여기의 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; 
}