1

我想要的只是用无线电输入过滤表格。这是我的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 代码是错误的，但我想让你明白我想要做什么。

4

1 回答 1

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

演示在这里

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

<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager
于 2013-10-17T07:46:56.787 回答