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

b4wnujal 于 2023-11-17 发布在 jQuery

关注(0)|答案(4)|浏览(135)

我有一个在第一行有下拉html选择器的表格，第一个选项是空的。
我需要隐藏表中的所有行，除了那些匹配选择器值的行。如果选择了第一个选项--隐藏下面的所有行。我使用类的原因是TR，因为可能有多个匹配的选项行。

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

字符串

超文本标记语言

<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

来源：https://stackoverflow.com/questions/10542606/hiding-all-but-first-table-row-with-jquery

4条答案

按热度按时间

z4iuyo4d1#

您错过了first-child之前的:

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

字符串

赞(0）回复(0）举报 2023-11-17

bvn4nwqk2#

试试下面这样的东西，

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

字符串

赞(0）回复(0）举报 2023-11-17

toiithl63#

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

字符串
或者：

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

型
需要在第一个<option>中添加一个value属性：

<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漂亮，清晰，干净，更快。

赞(0）回复(0）举报 2023-11-17

dxpyg8gm4#