jQuery控制TR显示隐藏的三种常用方法

网上有很多，这里介绍三种：

第一种方法，就是使用id，这个方法可以在生成html的时候动态设置tr的id，也是用得最多最简单的一种，如下：

?

1 2 3 4 5 6

< table > < tr >< td >这行不隐藏</ td ></ tr > < tr id = "tr_1" >< td >这行要隐藏</ td ></ tr > < tr id = "tr_2" >< td >这行要隐藏</ td ></ tr > ... </ table >

那么控制显隐可以直接使用

?

1 2 3

for ( var i = 1; i < tr_len; i++){ //tr_len是要控制的tr个数 $( "#tr_" +i).hide(); }

第二种方法，是使用$.each()，这个方法需要设置table的id，如下：

?

1 2 3 4 5 6

<table id= "Tbl" > <tr><td>这行不隐藏</td></tr> <tr><td>这行要隐藏</td></tr> <tr><td>这行要隐藏</td></tr> ... </table>

那么控制显隐可以直接使用

?

1 2 3 4 5

$.each($( "#Tbl tr" ), function (i){ if (i > 0){ this .style.display = 'none' ; } });

第三种方法，是通过属性筛选器，这个方法需要给tr加上某个特定属性，比如class，如下：

?

1 2 3 4 5 6

<table id= "Tbl" > <tr><td>这行不隐藏</td></tr> <tr><td class= "hid" >这行要隐藏</td></tr> <tr><td class= "hid" >这行要隐藏</td></tr> ... </table>

那么控制显隐可以直接使用

?

1 2 3 4

var trs = $( "tr[class='hid']" ); for (i = 0; i < trs.length; i++){ trs[i].style.display = "none" ; //这里获取的trs[i]是DOM对象而不是jQuery对象，因此不能直接使用hide()方法 }

就这么简单。如果是要显示的话，把相应的方法改成show()或者display属性改为”"即可

实际应用：

说明：默认情况下，只显示“对应页面名称”所在行，当点击单选按钮时，显示不同的行。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< tr > < td class = "tr_title_edit" >< label for = "f_navname" >对应页面链接< font color = "red" >*</ font ></ label ></ td > < td class = "tr_content_edit" > < input type = "radio" id = "f_inner" name = "f_navState" value = "1" checked = "checked" />< label for = "f_inner" >内部链接</ label > < input type = "radio" id = "f_outer" name = "f_navState" value = "2" />< label for = "f_outer" >外部链接</ label ></ td > </ tr >   < tr id = "il" style = "display:block" > < td class = "tr_title_edit" >< label for = "f_pagename" >对应页面名称</ label ></ td > < td class = "tr_content_edit" >< select name = 'f_pageid' id = "f_pageid" > < option value = "" ></ option > < option value = "" >新闻</ option > < option value = "" >通知</ option > </ select ></ td > </ tr > < tr id = "ol" style = "display:none" > < td class = "tr_title_edit" >< label for = "f_navname" >外部链接</ label ></ td > < td class = "tr_content_edit" >< input type = "text" class = "inputLine" size = "40" id = "f_outsidelink" name = "f_outsidelink" /></ td > </ tr >

通过id控制隐藏和显示如下：

?