javascript - 具有多个 radio 输入的过滤表

Question

我想要的只是用 radio 输入过滤表格。这是我的jsfiddle

我正在使用这个输入和表格:

<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 时。

我知道js代码是错误的，但我希望你明白我想要做什么。

Answer 1

试试这个，更简单:

$('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();
});

演示 here

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

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