Question

您好，目前我有这个表格过滤器代码，您可以尝试this小提琴。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="../js/vendor/jquery.js"></script>
      <script>
         (function(document) {
          'use strict';

          var LightTableFilter = (function(Arr) {

              var _input;

              function _onInputEvent(e) {
                  _input = e.target;
                  var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
                  Arr.forEach.call(tables, function(table) {
                      Arr.forEach.call(table.tBodies, function(tbody) {
                          Arr.forEach.call(tbody.rows, _filter);
                      });
                  });
              }

              function _filter(row) {
                  var text = row.textContent.toLowerCase(),
                      val = _input.value.toLowerCase();
                  row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
              }

              return {
                  init: function() {
                      var inputs = document.getElementsByClassName('light-table-filter');
                      Arr.forEach.call(inputs, function(input) {
                          input.oninput = _onInputEvent;
                      });
                  }
              };
          })(Array.prototype);

          document.addEventListener('readystatechange', function() {
              if (document.readyState === 'complete') {
                  LightTableFilter.init();
              }
          });

         })(document);


         $(document).ready(function() {
         $('a').click(function(e) {
          e.preventDefault();
          var text = $(this).text();
          $('input[type=search]').val(text);
          $( "#right-label" ).focus();
         });
         });
      </script>
   </head>
   <body>
      Search: <input type="search" class="light-table-filter" data-table="order-table" id="right-label" placeholder="Filter"> 
      <a href="#">Active</a> | <a href="#">Inactive</a> | <a href="#">Banned</a>
      <table>
      <thead>
         <tr>
            <th>Name</th>
            <th>Contact Number</th>
            <th>Course</th>
            <th>Status</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Robert</td>
            <td>09054848</td>
            <td>BSIT</td>
            <td>Active</td>
         </tr>
         <tr>
            <td>Mark</td>
            <td>5959547</td>
            <td>BSA</td>
            <td>Inactive</td>
         </tr>
         <tr>
            <td>Doe</td>
            <td>5959547</td>
            <td>BSA</td>
            <td>Banned</td>
         </tr>
      </tbody>
      </table>
   </body>
</html>

表过滤器正在运行，但我想添加text / s，当我点击它时，它将是文本框的值并将过滤表。我添加的文本是Active，Inactive和Banned。如果单击其中一个，它将是输入的值。问题是过滤器代码无法使用该代码。

非常感谢任何帮助

Answer 1

更新了代码并将其检出 https://jsfiddle.net/kushal812/vwhccu7w/16/

进行了一些更改

var table = $('#mytable')
$('a').click(function (e) {
     e.preventDefault();
     var text = $(this).text() || "";
     table.find('tbody > tr').hide();
     $('input[type=search]').val(text);
     table.find("." + text.toLowerCase()).removeClass("hidden")
 });

过滤表不起作用

1 个答案: