用tbody代替div 解决 table tr的隐藏问题

有如下需求，需要控制一个table内几个tr的显示问题。一开始想的方法是在这几个要显示的tr外面套一个div,利用div的display:none属性来解决。 但是后来发现div和tr嵌套的时候会有问题。例如，如果我的html页面是这样的源码： 

Html代码：

 1 <head>     
 2 </head>     
 3 <body>                         
 4 <table>     
 5 <div id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">     
 6 <tr>     
 7 <td>借方帐号：</td>     
 8 </tr>     
 9 <tr>     
10 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>     
11 </tr>     
12 </div>     
13 </table>     
14 </body>   
15 <head>  
16 </head>  
17 <body>       
18 <table>  
19 <div id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">  
20 <tr>  
21 <td>借方帐号：</td>  
22 </tr>  
23 <tr>  
24 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>  
25 </tr>  
26 </div>  
27 </table>  
28 </body>

那么打开这个html页面后，发现层还是会显示。 

后来才发现，其实div和tr的相互嵌套是有问题。所以可以用tbody来代替实现。实现后的代码如下： 

Html代码：

 

 1 <head>     
 2 </head>     
 3 <body>                         
 4 <table>     
 5 <tbody id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">     
 6 <tr>     
 7 <td>借方帐号：</td>     
 8 </tr>     
 9 <tr>     
10 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>     
11 </tr>     
12 </tbody>     
13 </table>     
14 </body>   
15 <head>  
16 </head>  
17 <body>       
18 <table>  
19 <tbody id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">  
20 <tr>  
21 <td>借方帐号：</td>  
22 </tr>  
23 <tr>  
24 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>  
25 </tr>  
26 </tbody>  
27 </table>  
28 </body>

 转自：http://yafei.iteye.com/blog/743860

posted on 2014-12-17 14:41  两宝程序cboii  阅读(1540)  评论(1)  编辑  收藏  举报

导航