zoukankan      html  css  js  c++  java
  • 用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="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="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="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="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

    作者:Cboii

    本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。

    由于博主的水平不高,不足和错误之处在所难免,希望大家能够批评指出。

    在wordpress安装、主题、插件以及开发上面有问题的,可以加入qq群:1140958614(Wp建站每日学习/交流群)进行学习和提问

    如果需要建站服务,可以直接联系我的qq:185369045

  • 相关阅读:
    PAT Advanced 1044 Shopping in Mars (25) [⼆分查找]
    PAT Advanced 1029 Median (25) [two pointers]
    PAT Advanced 1010 Radix(25) [⼆分法]
    PAT Basic 1070 结绳(25) [排序,贪⼼]
    PAT Basic 1023 组个最⼩数 (20) [贪⼼算法]
    PAT Basic 1020 ⽉饼 (25) [贪⼼算法]
    PAT Advanced 1070 Mooncake (25) [贪⼼算法]
    PAT Advanced 1067 Sort with Swap(0,*) (25) [贪⼼算法]
    PAT Advanced 1038 Recover the Smallest Number (30) [贪⼼算法]
    PAT Advanced 1037 Magic Coupon (25) [贪⼼算法]
  • 原文地址:https://www.cnblogs.com/chenboyi081/p/4169357.html
Copyright © 2011-2022 走看看