2016-08-17 4 views
0

各行に対してそのクラスが機能します。任意の行から一度に1つだけ使用する方法はありますか? クラスを任意の行のクリックされた列にのみ追加し、すべてのtrクラスの他のすべてのtdは空にする必要があります。 plsはあなたがすべてのtd要素のからactiveクラスを削除する必要がJQueryの兄弟()。任意の行のクリックされた列にのみクラスを追加します。

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

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

+0

現在のtdの兄弟を使用する場合は、兄弟である1つのtdだけが返されます。これがコードが機能しない理由です。コード内のすべてのtdには1つのtdの兄弟があります。tdはそのいとこであり、兄弟ではありません – mean

答えて

0

を助けます。現在のところ、クラスは兄弟のtd要素からのみ削除しています。

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

DEMO

1

なぜ単に新しいセルに設定する前に、すべてのtdactiveクラスを削除しませんか?

$('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>

-1
$('#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

+0

このコードの問題点を教えてください – mean

関連する問題