带有多个无线电输入的过滤表 [英] Filter table with multiple radio inputs

问题描述

我只想用单选输入过滤表. 这是我的 jsfiddle

All I want is filter the table with radio inputs. This is my jsfiddle

我正在使用此输入和表格:

I am using this inputs and table:

<div style="border:1px solid;">
<input  type="radio" id="Bob" name="name"  />Bob
<input type="radio" id="Jay" name="name"  />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
    <tr>
        <th>Name</th><th>Position</th>
    </tr>
    <tr>
        <td>Bob</td><td>Developer</td>
    </tr>
    <tr>
        <td>Jay</td><td>Manager</td>        
    </tr>
    <tr>
        <td>Bob</td><td>Manager</td>
    </tr>
    <tr>
        <td>Jay</td><td>Developer</td>        
    </tr>
</table>

和这个js:

 $('#Bob').change( function() {
     $('tr').show();
     $('tr:not(:has(th)):not(:contains("Bob"))').hide();
 });

 $('#Jay').change( function() {
     $('tr').show();
     $('tr:not(:has(th)):not(:contains("Jay"))').hide();
 });

 $('#developer').change( function() {
     $('tr').show();
     $('tr:not(:has(th)):not(:contains("Developer"))').hide();
 });

 $('#itManager').change( function() {
     $('tr').show();
     $('tr:not(:has(th)):not(:contains("Manager"))').hide();
 });

我需要的是双过滤器，当我选择Bob时，它只显示bob，而当我选择Developer时，我想看到Bob-Developer tr.

All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.

我知道js代码是错误的，但我希望您了解我想做什么.

I know js code is wrong but I wanted you make understand what I want to do.

推荐答案

尝试一下，更简单:

$('input[type="radio"]').change(function () {
    var name = $('input[name="name"]:checked').prop('id') || '';
    var position = $('input[name="position"]:checked').prop('id') || '';
    $('tr').hide();
    $('tr:contains(' + name + ')').show();
    $('tr').not(':contains(' + position + ')').hide();
});

演示此处

您需要对HTML进行的唯一更改是使位置单选按钮的ID与表格相同.该信息可以在tr显示/隐藏中使用.喜欢:

Demo here

The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:

<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager

这篇关于带有多个无线电输入的过滤表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！