js控制table tr 的方法

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

1.   <table>  
   
2.     <tr><td>这行不隐藏</td></tr>  
   
3.     <tr id="tr_1"><td>这行要隐藏</td></tr>  
   
4.     <tr id="tr_2"><td>这行要隐藏</td></tr>  
   
5.     ...  
   
6.     </table>  
   

复制代码

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

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

复制代码

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


Html代码

1. <table id="Tbl">  
   
2.        <tr><td>这行不隐藏</td></tr>    
   
3.        <tr><td>这行要隐藏</td></tr>    
   
4.        <tr><td>这行要隐藏</td></tr>    
   
5.     ...  
   
6.     </table>  
   

复制代码

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

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

复制代码

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

1.   <table id="Tbl">  
   
2.         <tr><td>这行不隐藏</td></tr>    
   
3.         <tr><td class="hid">这行要隐藏</td></tr>  
   
4.         <tr><td class="hid">这行要隐藏</td></tr>    
   
5.     ...  
   
6.     </table>  
   

复制代码

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

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

复制代码

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





实际应用：

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

  
Html代码

1.   <tr>  
   
2.     <td class="tr_title_edit"><label for="f_navname">对应页面链接<font color="red">*</font></label></td>  
   
3.     <td  class="tr_content_edit">  
   
4.     <input type="radio" id="f_inner"  name="f_navState" value="1" checked="checked" /><label for="f_inner">内部链接</label>  
   
5.     <input type="radio" id="f_outer"  name="f_navState" value="2" /><label for="f_outer">外部链接</label></td>  
   
6.     </tr>  
   
7.       
   
8.     <tr id="il" style="display:block">  
   
9.     <td class="tr_title_edit"><label for="f_pagename">对应页面名称</label></td>  
   
10.     <td  class="tr_content_edit"><select name='f_pageid' id="f_pageid">  
    
11.       <option value=""></option>  
    
12.        <option value="">新闻</option>  
    
13.        <option value="">通知</option>  
    
14.     </select></td>  
    
15.     </tr>  
    
16.     <tr id="ol" style="display:none">  
    
17.     <td class="tr_title_edit"><label for="f_navname">外部链接</label></td>  
    
18.     <td  class="tr_content_edit"><input type="text" class="inputLine" size="40" id="f_outsidelink"  name="f_outsidelink" /></td>  
    
19.     </tr>  
    

复制代码

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

1.   $("input[name='f_navState']").click(function(){  
   
2.              //if($("input[name='f_navState']").attr("checked")==true){  
   
3.                $("input[name='f_navState']").each(function(i){  
   
4.                   if(this.checked){  
   
5.                      var f_navState = $("input[name='f_navState']")[i].value;   //获得单选框的值  
   
6.                      if(f_navState==1){  
   
7.                         //alert(123);  
   
8.                         $("#il").show();  
   
9.                         $("#ol").hide();  
   
10.                      }else{  
    
11.                         //alert(456);  
    
12.                         $("#ol").show();  
    
13.                         $("#il").hide();  
    
14.                      }  
    
15.                         
    
16.                 }  
    
17.                });  
    
18.              //}  
    
19.         
    
20.       });
    

复制代码