首页 文章

使用jQuery隐藏除第一个表行之外的所有行

提问于
浏览 次
2

我在第一行有一个带有下拉html选择器的表 . 第一个选项是空白 .

我需要隐藏表中除了与选择器值匹配的行之外的所有行 . 如果选择了第一个选项 - 隐藏下面的所有行 . 我使用TRs类的原因，因为某些匹配选项可能有多行 .

JS

$("#mySelector").change(function(){
    opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:not(first-child)").hide(); 
    }
});

HTML

<table id="myTbl">
<tr>
   <td>
    <select id="mySelector">
    <option> select one
    <option value="val1"> v1
    <option value="val2"> v12
    <option value="val3"> v3
    </selector>
   </td>
</tr>
<tr class="val1">
   <td>
    asdasd 1
   </td>
</tr>

<tr class="val2">
   <td>
    asdasd 2
   </td>
</tr>

<tr class="val3">
   <td>
    asdasd 3
   </td>
</tr>
</table>

它似乎应该工作，但事实并非如此 . 我错过了什么？

jquery

3 回答

  • 3

    在 first-child 之前你错过了 :

    $("#myTbl tr:not(:first-child)").hide();
    回复于
  • 8

    尝试类似下面的内容，

    $("#mySelector").change(function(){
    var opt = $(this).val();
    if(opt != "") {
        $("." + opt).show();
    } else {
        $("#myTbl tr:gt(0)").hide(); 
    }
});
    回复于
  • 3
    $("#myTbl tr:not(:eq(0))").hide();

    要么：

    $("#myTbl tr:not(:first)").hide();

    您需要将值属性添加到第一个 <option> ：

    <select id="mySelector">
<option value=""> select one // <<<<======
<option value="val1"> v1
<option value="val2"> v12
<option value="val3"> v3
</select> // Not </selector>

    Live DEMO

    请注意 opt = $(this).val();
    应该 this.value 漂亮，清晰，干净，快捷 .

    回复于

相关问题