2016-08-17 84 views
0

其为每行的工作。如何从任何行一次只使用一个? 仅将类添加到任何行中的单击列,所有tr类中的所有其他td都应为空。 请帮助JQuery兄弟姐妹()。只为每行的点击列添加类

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

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

+0

如果你将使用当前td的兄弟,那么它将只返回一个td,这是它的兄弟姐妹。这是你的代码不工作的原因。你的代码中的每一个td都有一个td兄弟姐妹其他td是它的表兄弟不是兄弟 – mean

回答

0

你需要从所有td元素的删除active类。截至目前,您只能从兄弟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