用tbody代替div 解决 table tr的隐藏问题
有如下需求,需要控制一个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的隐藏问题的更多相关文章
- 解决table插入tr错位
table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="&q ...
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- jquery('tr','div')和jquery('tr,div')
jQuery('tr', 'div') 等价于 $('tr', 'div') 表示div里面寻找tr jQuery('tr, div') <=> $('tr, div') 表 ...
- div模拟table,可实现左右高度同增长(html布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 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 ...
- DIV中TABLE居的2种方式
<html><head><title>测试页面</title></head><body><div width=" ...
- div模拟table
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...
- div 内table 居中实现代码
有时候在一个div里面添加一个表格,如想让它居住排列,需要做如下的操作. css代码: 代码如下: #dlgReply { /*display: table-cell; text-align: c ...
随机推荐
- lightoj 1005 组合数学
题目链接:http://lightoj.com/volume_showproblem.php?problem=1005 #include <cstdio> #include <cst ...
- Java 单元测试Junit
@Test @Before @After 测试方法运行前执行Before动作(比如创建资源),运行后执行After动作(比如销毁资源) @BeforeClass @AfterClass 测试类运行前执 ...
- hdu 4640 Island and study-sister(状态压缩dp)
先处理前两个学长到达各个点所需要的最少时间,在计算前两个学长和最后一个学长救出所有学妹的最少时间. #include<stdio.h> #include<string.h> # ...
- C#中常用接口介绍
1. IComparable接口 IComparable接口定义通用的比较方法.由类型使用的IComparable接口提供了一种比较多个对象的标准方式.如果一个类要实现与其它对象的比较, 则必须实现I ...
- 字体图标 icon font
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...
- 全球最低功耗蓝牙单芯片(DA14580)系统架构和应用开发框架分析
DA14580是Dialog公司研制的蓝牙单芯片,号称全球功耗最低,是TI CC2541的四分之一,是运动手环等穿戴类电子产品的常用芯片.但是DA14580的开发门槛不低,适合有蓝牙开发经验的团队来开 ...
- 深入分析 Java 中的中文编码问题--转
几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么要编码?我们能不能不编码?要回答这个问题必须要回到计算机是如何表示我们人类能够理解的符号的,这些符号也就是我们人类使用的语言 ...
- ubuntu 安装eclipse
安装步骤: 一.下载客户端: 解压放到,/opt/Java/eclipse目录下,解压方法参考上一篇文章<ubuntu 配置Java jdk> 二.打开eclipse: 打开终端,输入,c ...
- python的局部变量和全局变量
#coding=utf-8#全局变量与局部变量 #作用域def func(): i=8#print i# print object# j=9# print j #局部变量def func(a): i= ...
- java中的IO一
一.IO操作的目标 IO的流向 二.IO的分类方法 1.第一种分法:输入流.输出流 2.第二种分法:字节流.字符流 3.第三种分法:节点流.处理流 三.IO当中的核心类 核心类中的核心方法 Input ...