Javascript / Jquery：使用多个单选按钮过滤表

时间：2018-03-30 10:16:07

标签： javascript jquery html

我正在尝试过滤一个简单的HTML表，过滤器由多个单选按钮决定。目标是显示/隐藏任何包含/不包含过滤器中单词的行。

例如，如果我在“auto”过滤器上选择“是”并在“手动”过滤器上选择“否”，则应查看名为“auto”的列为“yes”值，而“manual”列为“no”值。

我用this question尝试了它，但是它使用逻辑OR而不是逻辑AND进行过滤。此外，当用户想要停用相应的过滤器时，我也不太清楚如何将过滤器设置为非活动状态。

这是我的HTML代码：

<html>
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<body>
<form name="FilterForm" id="FilterForm" action="" method="">
    <label>Auto:</label>
    <input type="radio" name="auto" value="yes" />
    <label>yes</label>

    <input type="radio" name="auto" value="no" />
    <label>no</label>

    <input type="radio" name="auto" value="inactive" />
    <label>inactive</label>
    <br>

    <label>Manually:</label>
    <input type="radio" name="manually" value="yes" />
    <label>yes</label>

    <input type="radio" name="manually" value="no" />
    <label>no</label>

    <input type="radio" name="manually" value="inactive" />
    <label>inactive</label>
    <br>

    <label>Downgrade:</label>
    <input type="radio" name="downgrade" value="yes" />
    <label>yes</label>

    <input type="radio" name="downgrade" value="no" />
    <label>no</label>

    <input type="radio" name="downgrade" value="inactive" />
    <label>inactive</label>
    <br>

</form>

<table border="1" id="ExampleTable">
    <thead>
    <tr>
        <th>name</th>
        <th>auto</th>
        <th>manually</th>
        <th>downgrade</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td class="name">Name1</td>
        <td class="auto">yes</td>
        <td class="manually">yes</td>
        <td class="downgrade">yes</td>

    </tr>
    <tr>
        <td class="name">Name2</td>
        <td class="auto">no</td>
        <td class="manually">no</td>
        <td class="downgrade">yes</td>

    </tr>
    <tr>
        <td class="name">Name3</td>
        <td class="auto">no</td>
        <td class="manually">yes</td>
        <td class="downgrade">no</td>

    </tr>

    <tr>
        <td class="name">Name4</td>
        <td class="auto">yes</td>
        <td class="manually">no</td>
        <td class="downgrade">yes</td>
    </tr>
    </tbody>

</table>
</body>
</html>

这是我在前面提到的问题的帮助下做的Javascript：

<script>
    $('input[type="radio"]').change(function () {
        var firstRow = 'name';
        var auto = $('input[name="auto"]:checked').prop('value') || '';
        var manually = $('input[name="manually"]:checked').prop('value') || '';
        var downgrade = $('input[name="downgrade"]:checked').prop('value') || '';
        $('tr').hide();
        $('tr:contains(' + firstRow + ')').show();
        $('tr:contains(' + auto + ')').show();
        $('tr').not(':contains(' + manually + ')').hide();
        $('tr').not(':contains(' + downgrade + ')').hide();
    });
</script>

这是一张更好理解的图片：

project_image

由于我通常不使用JS和JQuery，所以我无法弄清楚问题并且时间很短。我将非常感谢推进正确的方向，提前谢谢。

3 个答案:

答案 0 :(得分：1)

我不确定你想用非活动单选按钮做什么，

如果没有非活动的代码，将解决您的问题。

$(document).ready(function(){
    $('input[type="radio"]').change(function () {
        var firstRow = 'name';
        var auto = $('input[name="auto"]:checked').prop('value') || '';
        var manually = $('input[name="manually"]:checked').prop('value') || '';
        var downgrade = $('input[name="downgrade"]:checked').prop('value') || '';
        $('tr').hide();
        $('tr:contains(' + firstRow + ')').show();

        var chks = $('input[type="radio"]:checked');

        var trs ;
        if(auto!= '' && auto != 'inactive'){
            var chkName = $('input[name="auto"]:checked').prop('name');
            trs = $("tr").find("."+chkName+':contains('+auto+')').parent();
        }

        if(manually!= '' && manually != 'inactive'){
            var chkName = $('input[name="manually"]:checked').prop('name');
            trs = $(trs).find("."+chkName+':contains('+manually+')').parent();
        }

        if(downgrade!= '' && downgrade!= 'inactive'){
            var chkName = $('input[name="downgrade"]:checked').prop('name');
            trs = $(trs).find("."+chkName+':contains('+downgrade+')').parent();
        }
        $(trs).show();

    });
});

答案 1 :(得分：1)

试试这个，我想这就是你想要的：

$(document).ready(function(){
    $('input[type="radio"]').change(function () {
        var firstRow = 'name';
        var auto = $('input[name="auto"]:checked').prop('value') || '';
        var manually = $('input[name="manually"]:checked').prop('value') || '';
        var downgrade = $('input[name="downgrade"]:checked').prop('value') || '';
        
        var trs = $('tr:not(:first)');
        $(trs).hide();
        
        if(auto == 'inactive' || manually == 'inactive' || downgrade == 'inactive'){
          // Do nothing as any of three condition says show all
          // And currently we all rows selected in trs
        } else {
          if(auto != '' && auto != 'inactive'){
              var chkdName = $('input[name="auto"]:checked').prop('name');
              trs = $(trs).find("."+chkdName+':contains('+auto+')').parent();
          }
  
          if(manually != '' && manually != 'inactive'){
              var chkdName = $('input[name="manually"]:checked').prop('name');
              trs = $(trs).find("."+chkdName+':contains('+manually+')').parent();
          }
  
          if(downgrade != '' && downgrade != 'inactive'){
              var chkdName = $('input[name="downgrade"]:checked').prop('name');
              trs = $(trs).find("."+chkdName+':contains('+downgrade+')').parent();
          }
        }
        $(trs).show();
    });
    
    $("#reset").on('click', function(){
      $(':radio').prop('checked', false);
      $('tr').show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="FilterForm" id="FilterForm" action="" method="">
  <label>Auto:</label>
  <input type="radio" name="auto" value="yes" />
  <label>Yes</label>

  <input type="radio" name="auto" value="no" />
  <label>No</label>

  <input type="radio" name="auto" value="inactive" />
  <label>All</label>
  <br>

  <label>Manually:</label>
  <input type="radio" name="manually" value="yes" />
  <label>Yes</label>

  <input type="radio" name="manually" value="no" />
  <label>No</label>

  <input type="radio" name="manually" value="inactive" />
  <label>All</label>
  <br>

  <label>Downgrade:</label>
  <input type="radio" name="downgrade" value="yes" />
  <label>Yes</label>

  <input type="radio" name="downgrade" value="no" />
  <label>No</label>

  <input type="radio" name="downgrade" value="inactive" />
  <label>All</label>
  <br>
</form>
<br><button id="reset">Reset</button><br><br><br><br>
<table border="1" id="ExampleTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Auto</th>
      <th>Manually</th>
      <th>Downgrade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name">Name1</td>
      <td class="auto">no</td>
      <td class="manually">no</td>
      <td class="downgrade">no</td>
    </tr>
    <tr>
      <td class="name">Name2</td>
      <td class="auto">no</td>
      <td class="manually">no</td>
      <td class="downgrade">yes</td>
    </tr>
    <tr>
      <td class="name">Name3</td>
      <td class="auto">no</td>
      <td class="manually">yes</td>
      <td class="downgrade">no</td>
    </tr>
    <tr>
      <td class="name">Name4</td>
      <td class="auto">yes</td>
      <td class="manually">no</td>
      <td class="downgrade">no</td>
    </tr>
    <tr>
      <td class="name">Name5</td>
      <td class="auto">yes</td>
      <td class="manually">no</td>
      <td class="downgrade">yes</td>
    </tr>
    <tr>
      <td class="name">Name6</td>
      <td class="auto">yes</td>
      <td class="manually">yes</td>
      <td class="downgrade">no</td>
    </tr>
    <tr>
      <td class="name">Name7</td>
      <td class="auto">no</td>
      <td class="manually">yes</td>
      <td class="downgrade">yes</td>
    </tr>
    <tr>
      <td class="name">Name8</td>
      <td class="auto">yes</td>
      <td class="manually">yes</td>
      <td class="downgrade">yes</td>
    </tr>
  </tbody>
</table>

以下是工作副本：fiddle url

答案 2 :(得分：0)

<强> HTML 

...
<tr class="header"> // added class here
    <th>name</th>
    <th>auto</th>
    <th>manually</th>
    <th>downgrade</th>
</tr>
...

<强>脚本 

$('input[type="radio"]').change(function () {
    var auto = $('input[name="auto"]:checked').prop('value') || '';
    var manually = $('input[name="manually"]:checked').prop('value') || '';
    var downgrade = $('input[name="downgrade"]:checked').prop('value') || '';
    $('tr:not("[class=header]")').each(function(){
        var hide = true;
        if(auto) {
            hide = $(this).find('td.auto').html() != auto;
        }
        if(manually && !hide) {
            hide = $(this).find('td.manually').html() != manually;
        }
        if(downgrade && !hide) {
            hide = hide && $(this).find('td.downgrade').html() != downgrade;
        }

        if(hide) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});
相关问题
最新问题