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

Html代码：

 <head>

 </head>

 <body>

 <table>

 <div id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">

 <tr>

 <td>借方帐号：</td>

 </tr>

 <tr>

 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>

 </tr>

 </div>

 </table>

 </body>

 <head>

 </head>

 <body>

 <table>

 <div id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">

 <tr>

 <td>借方帐号：</td>

 </tr>

 <tr>

 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>

 </tr>

 </div>

 </table>

 </body>

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

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

Html代码：

 <head>

 </head>

 <body>

 <table>

 <tbody id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">

 <tr>

 <td>借方帐号：</td>

 </tr>

 <tr>

 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>

 </tr>

 </tbody>

 </table>

 </body>

 <head>

 </head>

 <body>

 <table>

 <tbody id="borrowAccountDiv_CJ" style="display:none;" mce_style="display:none;">

 <tr>

 <td>借方帐号：</td>

 </tr>

 <tr>

 <td><input type="text" id="borrowAcount" name="borrowAcount" style="width:200px;" dataType="MoneyRequire" msg="借方帐号不能够为空，且必须为数字！"onclick="this.select()"/><fontcolorfontcolor="#FF0000"> *</font></td>

 </tr>

 </tbody>

 </table>

 </body>

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

用tbody代替div 解决 table tr的隐藏问题的更多相关文章

  1. 解决table插入tr错位

    table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="&q ...

  2. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  4. jquery('tr','div')和jquery('tr，div')

     jQuery('tr', 'div') 等价于 $('tr', 'div')    表示div里面寻找tr    jQuery('tr, div') <=> $('tr, div') 表 ...

  5. div模拟table，可实现左右高度同增长（html布局）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css中table tr:nth-child(even)改变tr背景颜色： IE7,8无效

    例如: .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F ...

  7. DIV中TABLE居的2种方式

    <html><head><title>测试页面</title></head><body><div width=" ...

  8. div模拟table

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...

  9. div 内table 居中实现代码

    有时候在一个div里面添加一个表格,如想让它居住排列,需要做如下的操作. css代码:   代码如下: #dlgReply { /*display: table-cell; text-align: c ...

随机推荐

  1. oGitHub 注册

    GitHub 注册 要想使用 GitHub 第一步当然是注册 GitHub 账号: 1.首先打开 https://github.com/pricing 进行注册. 2.在打开的页面中点击「Sign u ...

  2. [置顶] Ubuntu 12.04以上如何恢复GNOME传统界面

    Ubuntu 12.04以上开始使用Unity作为界面系统了,对于一直以来使用GNOME界面的人来说太不适应了,以下是如何在Ubuntu 12.04上恢复GNOME桌面 打开Linux终端上输入以下命 ...

  3. C#中常用接口介绍

    1. IComparable接口 IComparable接口定义通用的比较方法.由类型使用的IComparable接口提供了一种比较多个对象的标准方式.如果一个类要实现与其它对象的比较, 则必须实现I ...

  4. Javascript 控制style 小结

    style.top 如: c.style.top=scrollTop; 在IE各版本中可以,Safari, chrome, Firefox都不work, 需要在后面 + "px";

  5. MVC模式下的数据展示:EasyUI的datagrid

    我的数据库设计是一张老师表teacher,一张学生表student,一个教师对应多个学生,在学生一方建立外键; 还有一点想清楚,需要展示的数据是根据什么来的,是成功登陆的用户的id?还是直接展示所有的 ...

  6. 学习《Spring 3.x 企业应用开发实战》Day-1

    Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层

  7. python之Lambda函数---笔记

    <Python3 程序开发指南> Lambda函数,是一个匿名函数,创建语法: lambda parameters:express parameters:可选,如果提供,通常是逗号分隔的变 ...

  8. 排名最重要的三个优化阶段分析 --------------------->>转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

    网站排名,不是一两天能够决定的.要想取得好的排名,得分时间分阶段地做排名,网站优化分前期,中期,后期,怎么来区别不同的阶段该用怎样的优化手段.今晚SEO研究中心创始人Moon老师分享:排名最重要的三个 ...

  9. Windows Azure上的Odoo(OpenERP)-2.在Ubuntu虚拟机上部署Odoo(OpenERP)

    创建虚拟机的步骤在这里就不再赘述了,请参考上一篇博文. 首先用下述命令将Ubuntu系统进行更新: 1. sudo apt-get update 2. sudo apt-get upgrade 3. ...

  10. node.js的ejs模版引擎

    ejs版本是0.8.8,生成的views目录下面只有index.ejs and error.ejs,没有layout.ejs. D:\lianchuangfile\nodeDevelop\microb ...