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

我只想用无线电输入过滤表。 这是我的傻瓜

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

Bob Jay
Developer Manager
NamePosition
BobDeveloper
JayManager
BobManager
JayDeveloper

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

所有我需要的是双重filter,当我选择Bob时,它只显示bobs而不是我选择Developer我想看Bob – Developer tr。

我知道js代码是错误的,但我希望你能理解我想做什么。

试试这个,更简单:

 $('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 show / hide中使用。 喜欢:

 Developer Manager