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

时间：2014-11-08 05:25:15

标签： javascript jquery html

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

我做错了什么？

4 个答案:

答案 0 :(得分：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行中输入相等的值 喜欢＆＃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');
  });
});
相关问题
最新问题