用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

你可能感兴趣的:(table)