JavaScript/Jquery : Filter a table with multiple radio buttons

标签 javascript jquery html

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

例如，如果我在“自动”过滤器上选择“是”，在“手动”过滤器上选择“否”，则应该在名为“auto”的列中查找“yes”值，在“manually”列中查找“no”值。

我尝试了 this question但它使用逻辑“或”而不是逻辑“与”进行过滤。另外，当用户想要停用相应的过滤器时，我不太知道如何将过滤器设置为非事件状态。

这是我的 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，所以我无法完全弄清楚问题所在，而且时间很短。我将非常感谢您朝正确的方向插入，提前致谢。

最佳答案

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

$(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

关于JavaScript/Jquery : Filter a table with multiple radio buttons，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49572567/

上一篇：html - 如何将id添加到ngfor中的元素以及在ngfor中有条件地创建元素

下一篇：html - 检查最新检查的单选按钮？

相关文章：

javascript - Jquery 选择器性能和行为

jQuery Ajax 等待所有图像加载完毕

java - 提交和重定向后输入字段未清空？

javascript - 如何在另一个 div 中使用语义 ui 添加 div？

javascript - 如何在文本区域添加项目符号点？

javascript - 根据状态显示按钮而不是文本

javascript - 谷歌地图 : Uncaught ReferenceError: google is not defined

php - 如何将额外变量传递给 Jquery UI 可排序

javascript - 将toggleclass函数应用于已经有一个类的元素

JavaScript 文件上传不稳定

©2024 IT工具网  联系我们