返回首页

table中控制多行的显示和隐藏(tbody)

时间:2010-07-13 14:21来源:知行网www.zhixing123.cn 编辑:麦田守望者

开发过程中常遇到一个table中的一行或多行需要进行显示或隐藏控制。通常我们会想到给tr加个ID,这样做当然可以达要想要的效果,但重复代码太多,一般不用于多行的控制,对CSS有所了解的人这个时候就会想到用div来控制行了,但事实上,table中的div是只读的,它的style是不允许我们改变的,所以这个办法就失败了。所以最终的解决的办法是用tbody这个标签来实现div的效果。具体形式如下:

<table border="1" width="300">

<tbody id="tb1">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</tbody>

<tbody id="tb2" style="background-color:#eee;">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</tbody>

</table>

 

具体的控制语句是:document.all("tb1").style.display="" //显示

document.all("tb1").style.display="none" //隐藏
 

------分隔线----------------------------
标签(Tag):Javascript javascript教程 javascript特效 js特效
------分隔线----------------------------
推荐内容
  • 如何安装oracle 10g数据库 oracle 10g安装图解

    特意为大家制作了一份 oracle 10g安装图解 ,这样大家在安装的时候就不会出错了,至于...

  • Eclipse 如何安装Spring IDE支持

    ECLIPSE ARCHIVE离线安装包 SIZE 4.6 springsource-tool-suite-3.8.1.RELEASE-e4.6-up...

  • Eclipse 初始设置图解教程

    一、自动补全 .abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 二、字体设置 ...

  • idear如何配置JRebel实现热部署

    习惯写PHP之后,发现写JavaEE最蛋疼的是每次修改完代码,需要重启Tomcat服务,当项目...

  • java常用设计模式原型模式及深浅拷贝

    原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的...

  • java中单例模式的4种实现方式

    单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一。这种类型的设计模式...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8国际平台入口
  • Photoshop龙8国际平台入口
  • 3DMAX龙8国际平台入口
  • AutoCAD龙8国际平台入口
  • CorelDRAW龙8国际平台入口
  • Matlab龙8国际平台入口
  • 其他龙8国际平台入口
  • .Net龙8国际平台入口
  • Asp龙8国际平台入口
  • Php龙8国际平台入口
  • Jsp龙8国际平台入口
  • Ajax龙8国际平台入口
  • Android教程
  • 其他龙8国际平台入口
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影