JSFiddle - React, Tailwind, and code Playground

by Sure Sure

HTML

<div class='container'>
  <div class='filters'>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='No' placeholder='No' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='名称' placeholder='名称' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='★' placeholder='★' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='武器' placeholder='武器' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='主属性' placeholder='主属性' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='副属性' placeholder='副属性' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='HP' placeholder='HP' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='攻撃' placeholder='攻撃' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='回復' placeholder='回復' />
    </div>
    <div class='clearfix'></div>
  </div>
</div>
<div class='container'>
  <table>
    <thead>
      <th>No</th>
      <th>名称</th>
      <th>★</th>
      <th>武器</th>
      <th>主属性</th>
      <th>副属性</th>
      <th>HP</th>
      <th>攻撃</th>
      <th>回復</th>
    </thead>
    <tbody>
      <tr><td>001</td><td>Siam</td><td>★★★★★★</td><td>剣</td><td>光</td><td>－</td><td>20000</td><td>20000</td><td>5000</td></tr>
      <tr><td>002</td><td>Aniama</td><td>★★★★★★</td><td>槍</td><td>闇</td><td>－</td><td>40000</td><td>8000</td><td>5000</td></tr>
    </tbody>
  </table>

CSS

.actions a {
    display: block;
    margin: 25px auto 0;
    width: 200px;
    text-align: center;
    background: #b31d14;
    color: #c8c8c8;
    padding: 6px;
    border-radius: 3px;
    text-decoration: none;
}

.filters {
    margin-bottom: 20px;
}

.filter-container {
    float: left;
    width: 20%;
    padding-right: 10px;
}

.filter-container:last-of-type {
    padding-right: 0;
}

.filter-container input {
    -webkit-appearance: none;
    border: 1px solid #999;
    background: #FFF;
    border-radius: 2px;
    font-size:small;
    width: 100%;
}

.filter-container input:focus {
    outline: none;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    text-align: left;
    border-bottom: 1px solid #043a47;
}

table th, table td {
    padding: 6px 4px;
    font-size:small;
}

table td {
    border-bottom: 1px solid #087891;
    font-size:small;
}

table tr:last-of-type td {
    border-bottom: none;
}

table tr td:last-of-type {
    border-right: none;
}

.clearfix {
    clear: both;
    width: 100%;
}

JavaScript

(function($) {
  $.fn.multifilter = function(options) {
    var settings = $.extend( {
      'target'        : $('table')
    }, options);

    jQuery.expr[":"].Contains = function(a, i, m) {
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    this.each(function() {
      var $this = $(this);
      container = settings.target
      row_tag = 'tr';
      item_tag = 'td'
      rows = container.find($('tbody ' + row_tag))

      var col = container.find('th:Contains(' + $this.attr('name') + ')');
      var col_index = container.find($('thead th')).index(col); 
      $this.change(function() {
        input = $this
        filter = $this.val();
        rows.each(function() {
          hidden_rows = []
          visible_rows = []
          row = $(this);
          cell = $(row.children(item_tag)[col_index])
          if (filter) {
            if (cell.text().toLowerCase().indexOf(filter.toLowerCase()) != -1) {
              cell.attr('data-filtered', 'positive');
            } else {
              cell.attr('data-filtered', 'negative');
            }
            if (row.find(item_tag + "[data-filtered=negative]").size() > 0) {
               row.hide();
            } else {
              if (row.find(item_tag + "[data-filtered=positive]").size() > 0) {
                row.show();
              }
            }
          } else {
            cell.attr('data-filtered', 'positive');
            if (row.find(item_tag + "[data-filtered=negative]").size() > 0) {
              row.hide();
            } else {
              if (row.find(item_tag + "[data-filtered=positive]").size() > 0) {
                row.show();
              }
            }
          }
        })
        return false;
      }).keyup(function() {
        $this.change();
      });
    });
  };
})(jQuery);(jQuery);

$(document).ready(function() {
        $('.filter').multifilter()
      })