使用 JQuery 隐藏与按钮中的文本不匹配的表格行

Question

当用户单击 V 形（按钮）时，我希望 jquery 隐藏所有不包含 V 形内文本的表行。

我尝试了一些代码，发布在下面，但它不起作用。

jsfiddle

代码：

$(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 - 虽然我知道这会与我要求的相反（即这会隐藏我的雪佛龙中包含文本的行）它实际上并没有在我的页面上做任何事情。

我做错了什么？

Answer 1

DEMO (http://jsfiddle.net/11b2g0L2/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 行中输入相同的值 像 'Closed won' 和 'closed' 不相等，所以我改变了，并为 negotiating 和 qualifying 添加了一些行

Answer 2

检查这个小提琴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 形）添加类应该不是问题。

Answer 3

首先，您使用的方法有时并非每次都有效。因为在这一行 return $.trim($(this).find('td').eq(4).text()) === $chev 您正在使用 td:eq 的文本检查锚元素的文本(4) 从您的表中。有时可能会有所不同。例如，当我们单击关闭按钮时，它会检查文本 'closed' === 'closed won'，它总是返回您 false。

您的问题的解决方案： 让我们假设您创建的任何 HTML 将来都不会改变。 所以你可以根据人字形文本将类添加到 td:eq(4) 中，根据这个你的

<td>Demonstrating</td> 将更改为 <td class="demonstrating">Demonstrating</td> 其他人也会相应地改变。现在您必须从 li 元素为您的链接设置数据属性。因此，您的整个 UL for chevrons 按钮将更改如下：

<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();*/
    });
});    

我已将您的代码保留在注释中，以便您轻松了解我所做的更改。希望对您有所帮助。

Answer 4

为了完整起见，感谢上面 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');
  });
});