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

  • 相关阅读:
    conda安装opencv opencv-contrib-python opencv-python
    在Conda下安装jupyter notebook
    安装eric环境小记
    https://paperswithcode.com/task/object-detection
    全网最全开源工业缺陷数据集汇总(已更新24个)
    caffe windows训练测试自己的图片
    caffe训练自己的图片(分类)
    caffe学习系列:训练自己的图片集(超详细教程)
    conda install pytorch torchvision torchaudio cudatoolkit=10.2 -c pytorch
    回旋曲线的计算
  • 原文地址:https://www.cnblogs.com/chenboyi081/p/4169357.html
Copyright © 2011-2022 走看看