代码之家 › 专栏 › 技术社区 › NarendraR TheSociety

基于行中文本匹配的jquery过滤器

html jquery javascript

NarendraR TheSociety · 技术社区 · 7 年前

我是jquery的新手。我有以下HTML:

<div class="search-button">
   <label for="filter">Store Name:</label>
   <select class="filter" data-tableId="table1" onchange="testFilter()">
  <option value="all">All Stores</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="United States">United States</option>
  <option value="France">France</option>
  <option value="Denmark">Denmark</option>
  <option value="Ireland">Ireland</option>
   </select>
</div>

<div id="recordContent">
   <table id="orderTable">
  <tbody>
     <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
     </tr>
     <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
     </tr>
     <tr></tr>
     <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
     </tr>
     <tr></tr>
  </tbody>
   </table>
</div>

并使用下面的jquery函数按列文本过滤记录,但不能按存储名称过滤记录:

<script>
function testFilter(){
$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.record'); 
      console.log(filterValue);
    row.hide()
    row.each(function(i, el) {
         if($(el).children().innerHTML == filterValue) {
             $(el).show();
         }
    })   
});
}
</script>

3 回复 | 直到 7 年前

aslawin Michael Pawlowsky 7 年前

这是因为select中的选项值与表中的字段不对应。我对您的JS代码做了一些改进:

  // I removed onchange property of your select 
  // because change event is already attached in this code
  $(".filter").change(function() {
      var translatedFilterValue = getTranslatedFilterValue($(this).val());
      var rows = $('.record'); 

      rows.each(function(i, el) {
           if(translatedFilterValue == 'all' || ($(el).find('.store').text() == translatedFilterValue)) {
               $(el).show();
           } else {
               $(el).hide();
           }
      })   
  });

  //
  // Translates text from select to corresponding values in table
  // for example: from "United States" to "united_states"
  //
  function getTranslatedFilterValue(filterValue) {
    filterValue = filterValue.toLowerCase();

    return filterValue.replace(' ', '_');
  }

工作小提琴: CLICK!

epascarello 7 年前

$(el).children().innerHTML 正在查看整行的所有文本。这不符合你的要求。其他问题值有上限,表中的值没有。有一个下划线,而值没有。

不应将onchange事件内联,而应将onchange绑定到包含jquery的元素。

代码被注释。

$(".filter").change(function() {
  var filterValue = $(this)
    .val()  // get the value of the select
      .toLowerCase()  // normalize it
        .replace(/\s/g,'_');  // replace the spaces
  var rows = $('.record');  // grab all the rows
  rows.show();  // show them
  if (filterValue !== 'all') {  // if we have all, than skip this
    rows
      .find("td.store")  // find the store tds
        .filter(function() {  // loop over read the text and see if it does not match the filter value
          return this.textContent.toLowerCase().trim() !== filterValue
        })
          .parent()  // find the trs
            .hide()  // hide the table rows that do not match
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-button">
  <label for="filter">Store Name:</label>
  <select class="filter" data-tableId="table1">
    <option value="all">All Stores</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
    <option value="France">France</option>
    <option value="Denmark">Denmark</option>
    <option value="Ireland">Ireland</option>
  </select>
</div>

<div id="recordContent">
  <table id="orderTable">
    <tbody>
      <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
      </tr>
      <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
      </tr>
      <tr></tr>
    </tbody>
  </table>
</div>

Abhishek Pandey 7 年前

对代码进行了一些更改。

为了更好地进行筛选,需要将select ddl的值与表的(.store)值保持一致。

United Kingdom != united_kingdom

function testFilter(obj) { 

// removed .change because this method is already invoking on onchange

  var filterValue = $(obj).val(); 
  var row = $('.record');
  console.log(filterValue);
  row.hide()
  row.each(function(i, el) {

    if (

    $(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1 

    // used .text(), because .innerHTML will return nodes as well
    // whole content can't be same, so checked index of selected filter word
    // You can add .find('.store') if you want to make search in only store column
    // .toUpperCase() will maintain accuracy for sentence case. cause 'denmark' == 'Denmark' will return false
      ) {
      $(el).show();
    }
  })

}

function testFilter(obj) { // removed .change because this method is already invoking on onchange
  var filterValue = $(obj).val(); 
  var row = $('.record');
  console.log(filterValue);
  row.hide()
  row.each(function(i, el) {
    // used .text(), because .innerHTML will return nodes as well
    if (
$(el).text().toUpperCase().indexOf(filterValue.toUpperCase()) > -1 // whole content can't be same, so checked index of selected filter word
) {
      $(el).show();
    }
  })

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-button">
  <label for="filter">Store Name:</label>
  <select class="filter" data-tableId="table1" onchange="testFilter(this)">
    <option value="all">All Stores</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="United States">United States</option>
    <option value="France">France</option>
    <option value="Denmark">Denmark</option>
    <option value="Ireland">Ireland</option>
  </select>
</div>

<div id="recordContent">
  <table id="orderTable">
    <tbody>
      <tr>
        <th>Store Name</th>
        <th>Language Code</th>
        <th>Testcase Name</th>
        <th>Order Id</th>
        <th>Order Total</th>
        <th>Order Date</th>
      </tr>
      <tr class="record">
        <td class="store">ireland</td>
        <td class="langCode">en_IE</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">4001820209</td>
        <td class="orderTotal">19.98</td>
        <td class="orderDate">12-02-2019 15:37:30.201</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">denmark</td>
        <td class="langCode">en_DK</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">6001825084</td>
        <td class="orderTotal">338 DKK</td>
        <td class="orderDate">12-02-2019 15:37:35.140</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">7002541022</td>
        <td class="orderTotal">13.04</td>
        <td class="orderDate">12-02-2019 15:45:08.038</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">2001741036</td>
        <td class="orderTotal">69.90</td>
        <td class="orderDate">12-02-2019 15:46:33.310</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_kingdom</td>
        <td class="langCode">en_GB</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">7002541028</td>
        <td class="orderTotal">8.14</td>
        <td class="orderDate">12-02-2019 15:50:04.713</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">united_states</td>
        <td class="langCode">en_US</td>
        <td class="tcName">Registered User Checkout - Paypal</td>
        <td class="orderID">2001741030</td>
        <td class="orderTotal">15.98</td>
        <td class="orderDate">12-02-2019 15:51:23.551</td>
      </tr>
      <tr></tr>
      <tr class="record">
        <td class="store">france</td>
        <td class="langCode">en_FR</td>
        <td class="tcName">Guest User Checkout - Credit Card</td>
        <td class="orderID">11002001160</td>
        <td class="orderTotal">35.44</td>
        <td class="orderDate">12-02-2019 15:53:45.130</td>
      </tr>
      <tr></tr>
    </tbody>
  </table>
</div>