Question

我有一个问题，我已经采用了一个jquery插件（在桌面上过滤）。

这是网址：http://gregweber.info/projects/demo/flavorzoom.html

但我有一点不同的情况：

相反（文本框）我使用（dropdawn菜单）

 <select class="filter_tb">
    <option value="">All</option>
    <option value="6-K">6-K</option>
    <option value="20-F">20-F</option>
    <option value="SC 13G/A">SC 13G/A</option>
    <option value="SC 13G">SC 13G</option>
    <option value="F-10/A">F-10/A</option>
    <option value="F-X">F-X</option>
    <option value="F-10">F-10</option>
</select>

我正在按值过滤，但这是一个问题：当我在表格中选择“SC 13G”时，当然是显示“SC 13G / A”。

我可以阻止这个吗？我想只展示“SC 13G”，就像“F-10 ---＆gt; F-10 / A”一样

这是我的jquery选择器：

$(function() { 
  var theTable = $('table.RegulatoryFilingsTable')


  $(".filter_tb").change(function() {
    $.uiTableFilter( theTable, this.value );

  });


});

如果有可能，请帮助我

由于

Answer 1

因此，如果你想简单地进行完全匹配，那么过滤器可能有点过分，但这是一个额外的功能，可以添加它来做到这一点：

jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
    var text = caseSensitive ? str : str.toLowerCase();
    if(text == words) return true;
    return false;
}

以下是我用于测试的完整代码：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="./tablefilter.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function()
            {                
              var theTable = $('table.RegulatoryFilingsTable');
              $(".filter_tb").change(function() {
                $.uiTableFilter( theTable, this.value );
              });
            });
        </script>
    </head>
    <body>
         <select class="filter_tb">
            <option value="">All</option>
            <option value="6-K">6-K</option>
            <option value="20-F">20-F</option>
            <option value="SC 13G/A">SC 13G/A</option>
            <option value="SC 13G">SC 13G</option>
            <option value="F-10/A">F-10/A</option>
            <option value="F-X">F-X</option>
            <option value="F-10">F-10</option>
        </select>

        <br/><br/>

        <table class="RegulatoryFilingsTable">
            <thead><tr><th colspan="2">Your List</th><tr></thead>
            <tbody>
                <tr><td>6-K</td></tr>
                <tr><td>20-F</td></tr>
                <tr><td>SC 13G/A</td></tr>
                <tr><td>SC 13G</td></tr>
                <tr><td>F-10/A</td></tr>
                <tr><td>F-X</td></tr>
                <tr><td>F-10</td></tr>
            </tbody>
        </table>
   </body>
</html>

整个修改过的表过滤脚本（我称之为tablefilter.js）：

/*
 * Copyright (c) 2008 Greg Weber greg at gregweber.info
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * documentation at http://gregweber.info/projects/uitablefilter
 *
 * allows table rows to be filtered (made invisible)
 * <code>
 * t = $('table')
 * $.uiTableFilter( t, phrase )
 * </code>
 * arguments:
 *   jQuery object containing table rows
 *   phrase to search for
 *   optional arguments:
 *     column to limit search too (the column title in the table header)
 *     ifHidden - callback to execute if one or more elements was hidden
 */
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
  var new_hidden = false;
  if( this.last_phrase === phrase ) return false;

  var phrase_length = phrase.length;
  var words = phrase.toLowerCase().split(" ");

  // these function pointers may change
  var matches = function(elem) { elem.show() }
  var noMatch = function(elem) { elem.hide(); new_hidden = true }
  var getText = function(elem) { return elem.text() }

  if( column ) {
    var index = null;
    jq.find("thead > tr:last > th").each( function(i){
      if( $(this).text() == column ){
        index = i; return false;
      }
    });
    if( index == null ) throw("given column: " + column + " not found")

    getText = function(elem){ return jQuery(elem.find(
      ("td:eq(" + index + ")")  )).text()
    }
 }

  // if added one letter to last time,
  // just check newest word and only need to hide
  if( (words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
        this.last_phrase) ) {

    if( phrase[-1] === " " )
    { this.last_phrase = phrase; return false; }

    var words = words[-1]; // just search for the newest word

    // only hide visible rows
    matches = function(elem) {;}
    var elems = jq.find("tbody > tr:visible")
  }
  else {
    new_hidden = true;
    var elems = jq.find("tbody > tr")
  }

  /* elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  }); */

  elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.is_word( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  });

  last_phrase = phrase;
  if( ifHidden && new_hidden ) ifHidden();
  return jq;
};

// caching for speedup
jQuery.uiTableFilter.last_phrase = ""

// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
jQuery.uiTableFilter.has_words = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  for (var i=0; i < words.length; i++) {
    if (text.indexOf(words[i]) === -1) return false;
  }
  return true;
}

jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  if(text == words) return true;
  return false;
}

Answer 2

对于您的方案，插件可能过度。您可以使用下面的jQuery代码段实现所需的效果：

$(".filter_tb").change(function() {
    $(".food_planner tbody tr td:nth-child(2)").each(function () {
        if ($(this).text() != this.value) {
            $(this).parent().hide();
        } else {
            $(this).parent().show(); 
        }
    });
});

如果您想使用该插件，可以通过修改以下行来使其工作：

第26行：var words = phrase.toLowerCase().split(" ");到var words = phrase.toLowerCase();

第87行：if (text.indexOf(words[i]) === -1) return false;到if (text != words[i]) return false;

jQuery，过滤表

2 个答案: