Question

我有一个包含三种数据类型的表行的表：

 <tr class="odd" data-sector="blue red green orange" data-report="earnings industry" data-market="consumer enterprise maratime" role="row"></tr>

数据扇区
数据报告
数据市场

每种数据类型都有一个无线电检查部分进行过滤。我可以为其中一个无线电检查部分完成此操作，但不是全部三个。

这是一个Jsfiddle来展示我如何使用“部门”部分，但无法全部合作：

JS：

  $('input[type="radio"]').change(function (e) {

    var sector = $('input[name="sector"]:checked').prop('id') || '';
    var report = $('input[name="report"]:checked').prop('id') || '';
    var market = $('input[name="market"]:checked').prop('id') || '';
    filter(sector)
    e.preventDefault();
  });

  function filter(e) {
      var regex = new RegExp('\\b' + e + '\\b');

      $('#table').find('tr').hide().filter(function () {
          return regex.test($(this).data('sector'))
      }).show();
  }

所以我很失落如何让所有三个人一起工作。

因此，如果有人选择“红色”+“融资”+“航空”，则只显示“三个”和“六个”行。

Answer 1

我在这里建立了一个现场演示：

而不是regexp，你最好使用＆＃34; indexOf＆＃34;测试字符串。

＆＃13;

$('input[type="radio"]').change(function(e) {
  var sector = $('input[name="sector"]:checked').prop('id');
  var report = $('input[name="report"]:checked').prop('id');
  var market = $('input[name="market"]:checked').prop('id');
  filter({
    sector,
    report,
    market
  });
  e.preventDefault();
});

function filter(filters) {
  $('#table').find('tr').hide().filter(function() {
    for (var i in filters) {
      if (filters[i] && $(this).data(i).indexOf(filters[i]) === -1) {
        return false;
      }

    }
    return true;
  }).show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: flex;">
  <div style="">
    <p><strong>Sector</strong></p>
    <input type="radio" id="blue" name="sector" />Blue<br>
    <input type="radio" id="red" name="sector" />Red<br>
    <input type="radio" id="green" name="sector" />Green<br>
    <input type="radio" id="orange" name="sector" />Orange<br>
    <input type="radio" id="purple" name="sector" />Purple
  </div>
  <div style="">
    <p><strong>Report Type</strong></p>
    <input type="radio" id="earnings" name="report" />Earnings<br>
    <input type="radio" id="industry" name="report" />Industry<br>
    <input type="radio" id="financing" name="report" />Financing<br>
    <input type="radio" id="capital" name="report" />Capital
  </div>
  <div style="">
    <p><strong>Market</strong></p>
    <input type="radio" id="aviation" name="market" />Aviation<br>
    <input type="radio" id="consumer" name="market" />Consumer<br>
    <input type="radio" id="defense" name="market" />Defense<br>
    <input type="radio" id="enterprise" name="market" />Enterprise<br>
    <input type="radio" id="m2m" name="market" />M2M<br>
    <input type="radio" id="maratime" name="market" />Maratime
  </div>
</div>
<table id="table">
  <tbody>
    <tr class="odd" data-sector="blue red green orange" data-report="earnings industry" data-market="consumer enterprise maratime" role="row">
      <th>Table Row One</th>
    </tr>
    <tr class="even" data-sector="purple red" data-report="earnings capital" data-market="enterprise defense maratime" role="row">
      <th>Table Row Two</th>
    </tr>
    <tr class="odd" data-sector="green red" data-report="financing" data-market="defense" role="row">
      <th>Table Row Three</th>
    </tr>
    <tr class="even" data-sector="blue" data-report="industry financing" data-market="m2m consumer" role="row">
      <th>Table Row Four</th>
    </tr>
    <tr class="odd" data-sector="green orange purple" data-report="earnings" data-market="maratime" role="row">
      <th>Table Row Five</th>
    </tr>
    <tr class="even" data-sector="red" data-report="financing" data-market="aviation maratime" role="row">
      <th>Table Row Six</th>
    </tr>
  </tbody>
</table>

＆＃13;

通过data-attr包含字符串的多过滤器表行

1 个答案: