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

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

我尝试了一些代码，贴在下面，但不起作用

代码：

精简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>

商机名称公司价值关闭日期管道状态操作
$100,000.00
2014年11月19日，星期三
封闭韩元
$35,000.00
2014年11月27日，星期四
展示

我借用了代码来隐藏stackoverflow答案中的行：-虽然我知道这与我的要求相反（即，这将隐藏包含V形文字的行），但实际上它在我的页面上根本没有做任何事情

我做错了什么？

检查这把小提琴

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形）添加类应该不会有问题

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

'closed'='closed won'

，该文本将始终返回给您

false

您的问题的解决方案： 让我们假设您创建的任何HTML在将来都不会更改。 因此，您可以根据以下说明，根据V形文字将类添加到td:eq（4）

演示

将更改为

演示

其他人也会相应地改变。现在，您必须从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>

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

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

添加了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');
            }
        });

添加了一些虚拟行

您应该在AD和tbody行中输入相等的值

---

例如“已结束的赢”和“已结束的”不相等，因此我进行了更改，并添加了一些行，用于

协商

和

限定

只是为了完整性，多亏了TechnoKrol上面的解决方案，我终于让解决方案起作用了。感谢所有评论帮助我们的人。我的网站上的工作解决方案如下（供参考）：

---

如果您将类添加到行中（如prospect/Qualification等），这将更加容易，这意味着您的V形符号将为行创建类，单击时，您将获取V形符号innerHtml并隐藏V形符号HTMLY类所需的所有行您需要确切的文本或包含？谢谢，但是在共享的JSFIDLE中，单击任何按钮都会导致部分内容隐藏。“前景”导致隐藏“演示”对象，而所有其他V形导致隐藏“已关闭的圆”。你知道如何做到这一点吗？如果单击相应的按钮，行仅显示（例如，如果我单击“赢得”，则仅显示“关闭赢得”的行，其他所有内容均隐藏）？谢谢-这似乎满足了我的需要。是否有一种方法可以在未选择V形时显示所有行（我看到单击“显示所有机会”）这样做，但我希望它在取消选择V形时也能起作用。此外，我想我会将闭合的赢和闭合的丢失V形一分为二，这样效果会更好。谢谢你的帮助。你可以添加登录名，就像

选定的

类不存在一样，然后删除

隐藏行

。我会这样做。目前它在我的页面上不起作用（即使它可以在JSFIDLE中工作）。在我的页面上，js正在向每一行添加“hiidenRow”，而不仅仅是那些与clickedText不匹配的行。知道为什么会发生这种情况吗？（我只是从JSFIDLE中复制/粘贴js，所以它不是一个打字错误）。解决了-我的文本上都有空格（加上一个带有数字的span类，我没有将其包含在小提琴中）。因此，最后我var clickedText=$（this.clone（）.children（）.remove（）.end（）.text（）.trim（）；

tr.hiddenRow
{
    display:none;
}

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');
            }
        });

$(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');
  });
});