Question

我想要的只是用无线电输入过滤表格。这是我的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时，它只显示bobs而不是我选择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

具有多个无线电输入的过滤表

1 个答案:

演示here