JQuery 형제(). 모든 행의 클릭 된 열에 만 클래스를 추가하십시오.

Question

각 행에 대해 해당 클래스가 작동합니다. 어떤 행에서 한 번에 하나씩 만 사용하는 방법은 무엇입니까? 모든 행의 클릭 된 열에 만 클래스를 추가하고 모든 tr 클래스의 다른 모든 td는 비어 있어야합니다. PLS는

$('td').click(function(){ 
    $(this).siblings('td').removeClass('active'); 
    $(this).addClass('active'); 
}); 

http://jsfiddle.net/5QsCy/3/

Answer 1

당신은 모든 td 요소의에서 active 클래스를 제거해야 도움이됩니다. 현재로서는 형제 인 td 요소에서만 클래스를 제거합니다.

$('td').click(function(){ 
    $('td.active').removeClass('active'); //Remove active class from all td 
    $(this).addClass('active'); 
}); 

DEMO

Answer 2

이유는 단순히 새로운 셀로 설정하기 전에 모든 td에 active 클래스를 제거?

$('td').click(function(){ 
 
    $('td').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    border: solid 1px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>COL</td> 
 
    <td>COL</td> 
 
    </tr> 
 
    <tr> 
 
    <td>COL</td> 
 
    <td>COL</td> 
 
    </tr> 
 
    <tr> 
 
    <td>COL</td> 
 
    <td>COL</td> 
 
    </tr> 
 
<table>

Answer 3

$('#xyz td').click(function(){ 
    $("#xyz").find('td').removeClass('active'); 
    $(this).addClass('active'); 
}); 

HTML : -

<table id="xyz"> 
    <tr><td>COL</td><td>COL</td></tr> 
    <tr><td>COL</td><td>COL</td></tr> 
    <tr><td>COL</td><td>COL</td></tr> 
    <table> 

CSS : -

.active {border:solid 1px red;} 

DEMO