有如下需求,需要控制一个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. lightoj 1013 dp

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1013 #include <cstdio> #include <cst ...

  2. I - Arbitrage

    题目大意:套汇 套利是使用货币汇率的差异将一个单位的货币转换为多个相同的货币单位,例如1美元可以买0.5英镑,1英镑可以买10法郎,1法郎可以买0.21美元,然后聪明的人经过一些列兑换可以得到 1*0 ...

  3. Selenium终极自动化测试环境搭建(二)Selenium+Eclipse+Python

    Selenium终极自动化测试环境搭建(二)Selenium+Eclipse+Python 前面举例了Selenium+Eclipse+Junit+TestNG自动化测试环境的搭建,在前一篇的基础上, ...

  4. QQ群成员提取

    var ids = document.querySelectorAll(".member_id"); var names = document.querySelectorAll(& ...

  5. Android---用动画来处理布局的变化

    本文译自:http://developer.android.com/training/animation/layout.html 布局动画一种系统预装的动画,每次布局配置发生变化时,系统会运行它.你所 ...

  6. Android中自定义View的MeasureSpec使用

    有时,Android系统控件无法满足我们的需求,因此有必要自定义View.具体方法参见官方开发文档:http://developer.android.com/guide/topics/ui/custo ...

  7. (转)void指针(void *的用法)

    指针有两个属性:指向变量/对象的地址和长度 但是指针只存储地址,长度则取决于指针的类型 编译器根据指针的类型从指针指向的地址向后寻址 指针类型不同则寻址范围也不同,比如: int*从指定地址向后寻找4 ...

  8. C#操作INI配置文件示例

    源文件地址:http://pan.baidu.com/share/link?shareid=2536126078&uk=1761850335创建如图所示的控件: 源代码: using Syst ...

  9. Android AppWidget(转)

    AppWidget不知道大家使用这个多不多,这个在手机上也叫做挂件,挂件也就是放在桌面方便用户进行使用的,从android1.6开始挂件支持一些简单的lauout和view,到了android4.0之 ...

  10. 正则表达式中/i,/g,/ig,/gi,/m的区别和含义

    正则表达式中/i,/g,/ig,/gi,/m的区别和含义 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找.忽略大小写)/ig(全文查找.忽略大小写)