当用户点击V形符号（按钮）时，我希望jquery隐藏所有不包含V形符号中文本的表行。
我尝试了一些代码，发布在下面，但它不起作用。
代码：
$(function () {
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').not(this).removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
});
var $chev = $(this).text();
var $rowsNo = $('#sales-opportunities tbody tr').filter(function () {
return $.trim($(this).find('td').eq(4).text()) === $chev
}).toggle();
});
$(function () {
$('#show-all').click( function(){
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
});
});
剥离HTML：
<div class="col-lg-12">
<div id="chevrons">
<ul>
<li><a href="#" onclick="return false;">Prospect</a></li>
<li><a href="#" onclick="return false;">Qualifying</a></li>
<li><a href="#" onclick="return false;">Demonstrating</a></li>
<li><a href="#" onclick="return false;">Negotiating</a></li>
<li><a href="#" onclick="return false;">
Closed
</a></li>
<li id="dormant"><a href="#" onclick="return false;">Dormant
</a></li>
</ul>
</div>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" onclick="return false;" id="show-all">Show All Opportunities</a>
</li>
</ul>
</div>
<div class="table-responsive">
<table class="table table-striped display responsive no-wrap dataTable no-footer dtr-inline" id="sales-opportunities" role="grid" aria-describedby="sales-opportunities_info">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Opportunity Name: activate to sort column descending" style="width: 235px;">Opportunity Name</th><th class="sorting" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-label="Company: activate to sort column ascending" style="width: 120px;">Company</th><th class="sorting" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-label="Value: activate to sort column ascending" style="width: 117px;">Value</th><th class="sorting" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-label="Close Date: activate to sort column ascending" style="width: 181px;">Close Date</th><th class="sorting" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-label="Pipeline Status: activate to sort column ascending" style="width: 185px;">Pipeline Status</th><th class="sorting" tabindex="0" aria-controls="sales-opportunities" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 90px;">Action</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1"><a href="/sales_opportunities/20">Product for China</a></td>
<td><a href="/companies/99">China</a></td>
<td>$100,000.00</td>
<td>Wed, 19 Nov 2014</td>
<td>Closed won</td>
<td>
<div class="btn-group">
<a class="btn btn-sm btn-warning" href="/sales_opportunities/20/edit">edit</a>
</div>
</td>
</tr><tr role="row" class="even">
<td class="sorting_1"><a href="/sales_opportunities/21">Another product for China</a></td>
<td><a href="/companies/99">China</a></td>
<td>$35,000.00</td>
<td>Thu, 27 Nov 2014</td>
<td>Demonstrating</td>
<td>
<div class="btn-group">
<a class="btn btn-sm btn-warning" href="/sales_opportunities/21/edit">edit</a>
</div>
</td>
</tr></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
我借用代码来隐藏此stackoverflow答案中的行：hide row based on column value - 虽然我知道这会与我要求的相反（即这会隐藏包含文本的行）我的雪佛龙）在我的页面上实际上并没有做任何事情。
我做错了什么？
答案 0 :(得分：1)
添加了css类
tr.hiddenRow
{
display:none;
}
有些JS添加了
var allRows = $('.table-responsive table tbody tr');
allRows.removeClass('hiddenRow');
var clickedText = $(this).text();
allRows.each(function(){
//$(this).contains
if( ! $(this).is(':contains("'+clickedText+'")')) {
$(this).addClass('hiddenRow');
}
});
添加了一些虚拟行
您应该在thead和tbody行中输入相等的值
喜欢＆＃39;已关闭赢了＆＃39;并且关闭了＃39;不相等，所以我更改了，并为negotiating和qualifying
答案 1 :(得分：0)
检查这个小提琴http://jsfiddle.net/qw959Lr0/2/;
jquery的：
$(function () {
var allRows = $('.table-responsive table tbody tr');
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').not(this).removeClass('selected');
$('#show-all').removeAttr("style");
var $this = $(this),
classname = $this.text().toLowerCase().trim();
$this.toggleClass('selected');
allRows.removeClass('hiddenRow');
if($this.hasClass('selected'))
{
$.each(allRows,function(i,item)
{
$(item).hasClass(classname) ? '' : $(item).addClass('hiddenRow');
});
}
});
$('#show-all').click( function(){
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
allRows.removeClass('hiddenRow');
});
});
我添加了类，它工作得很好。如果您从数据库中获取项目，我认为它们应该具有类别名称，并且根据该类别（V形）添加类应该不是问题。
答案 2 :(得分：0)
首先，您使用的方法有时并非每次都有效。因为在这一行返回$ .trim（$（this）.find（'td'）。eq（4）.text（））=== $ chev你正在用td：eq的文本检查anchor元素的文本（4）从你的table.heich migth有时会有所不同。例如，当我们点击关闭按钮时，它将检查文本'closed' === 'closed won'，它总是返回false。
解决您的问题： 让我们假设您创建的任何HTML将来都不会改变。 所以你可以按照vvrons文本将这些类添加到td：eq（4），根据你的
<td>Demonstrating</td>将更改为<td class="demonstrating">Demonstrating</td>
其他人也会因此而改变。现在你必须从li元素为你的链接设置数据属性。所以你的整个UL for V形图按钮将改变如下：
<ul>
<li><a href="#" onclick="return false;" data-attribute_name_you_like = 'prospect'>Prospect</a></li>
<li><a href="#" onclick="return false;" data-attribute_name_you_like = 'qualifying'>Qualifying</a></li>
<li><a href="#" onclick="return false;" data-attribute_name_you_like = 'demonstrating'>Demonstrating</a></li>
<li><a href="#" onclick="return false;" data-attribute_name_you_like = 'negotiating'>Negotiating</a></li>
<li><a href="#" onclick="return false;" data-attribute_name_you_like = 'closed'>
Closed
</a></li>
<li id="dormant"><a href="#" onclick="return false;" data-attribute_name_you_like = 'dormant'>Dormant
</a></li>
</ul>
现在最后你必须改变你的onclick功能，如下所示：
$(function () {
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').not(this).removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
// instead of taking the text now we will take the data-attribute_name_what_you_like
//var $chev = $(this).text();
var $chev = $(this).attr('data-attribute_name_you_like');
// creating class syntax for td according to clicked button
var $tdClassName = $chev;
$('#sales-opportunities td.'+ $tdClassName).closest('tr').toggle();
/*var $rowsNo = $('#sales-opportunities tbody tr').filter(function () {
return $.trim($(this).find('td').eq(4).text()) === $chev
}).toggle();*/
});
});
我已将您的代码保留在注释中，以便您可以轻松了解我所做的更改。希望这会对你有所帮助。
答案 3 :(得分：0)
为了完整起见，感谢上面的TechnoKrol解决方案，我终于让解决方案正常运行。感谢所有评论帮助的人。我网站上的工作解决方案如下（供参考）：
$(function () {
var allRows = $('.table-responsive table tbody tr');
$('#chevrons > ul > li > a').click(function () {
$('#chevrons .selected').not(this).removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
$(this).click(function() {
if (! $(this).hasClass('selected')) {
allRows.removeClass('hiddenRow');
}
});
allRows.removeClass('hiddenRow');
var clickedText = $(this).clone()
.children()
.remove()
.end()
.text()
.trim();
allRows.each(function(){
//$(this).contains
if( ! $(this).is(':contains("'+clickedText+'")')) {
$(this).addClass('hiddenRow');
}
});
});
});
$(function () {
$('#show-all').click(function () {
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
var allRows = $('.table-responsive table tbody tr');
allRows.removeClass('hiddenRow');
});
});