Question

我正在尝试显示一个表，每一行都有不同的类。

<table>
<tr class="blue"><td></td></tr>
<tr class="red"><td></td></tr>
<tr class="green"><td></td></tr></table>

我要做的是让用户选择一个单选按钮并使用jquery，它将显示蓝色，绿色，红色或所有行，具体取决于所选的内容。我该怎么做？

Answer 1

虽然以这种方式执行它可能不是最简单的方法（您可以只更改该tr的类，您将需要查询该特定元素，并只需将style.display属性设置为'none'

即

$('table','tr','.green').style.display = 'none';

Answer 2

假设HTML为

<input type="radio" name="color" value="blue">Blue
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="green">Green
<table>
  <tr class="blue"><td>11111111</td></tr>
  <tr class="red"><td>22222222</td></tr>
  <tr class="green"><td>33333333</td></tr>
</table>

jquery代码将为

$(document).ready(function(){
    $("input[type='radio']").on("click", function(){
        var self = $(this);
        $("table tr").each(function(){
            if(!$(this).hasClass(self.val())){
                 $(this).hide();
            } else {
                 $(this).show();
            }                
        });


    });
});

Answer 3

看看这个：

http://jsfiddle.net/ufomammut66/SxuXY/

基本上我们在任何输入中添加一个click事件，其名称为color，用于查看输入的值并相应地显示/隐藏。

如何使用jquery在类上打开或关闭显示

3 个答案: