<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf8">

    <title>Untitled Document</title>

    <script language="JavaScript" src="js/prototype.js"></script>

    <script language="JavaScript">

      function changeStyle(){

        if(document.getElementById('test').style.display=='none'){

          alert("show");

          document.getElementById('test').style.display='block'

        }else{

          alert("hide");

          document.getElementById('test').style.display='none'

        }

      }

    </script>

  </head>

  <body>

    <input value="测试" type="button" onclick="changeStyle()">

    <select type="button" value="测试" onchange="changeStyle();">

      <option>1</option>

      <option>2</option>

    </select>

    <table>

      <tr>

      <td><!--在table中嵌套div时，必须将div放在td中，否则达不到预期效果-->

    <div id="test" style="display:none;">

    <table>

      <tr>

        <td>

      <input type="text" value="1"/>

      </td>

      </tr>

    </table>

    </div>

    </td>

      </tr>

    </table>

  </body>

</html>

table嵌套div时，div必须放到td中，否则达不到预期的效果;但是div嵌套table时，div中写table、tr、td任意一个都可以正常显示。

如果要对tr、td隐藏时，这个时候div就不起作用了，可以直接对tr、td进行隐藏，当然如果闲一行一行隐藏太麻烦了，那就试试tbody吧，把div替换成tbody将需要隐藏的tr、td放到tbody中，这样就可以显示和隐藏了，见代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf8">

    <title>Untitled Document</title>

    <script language="JavaScript" src="js/prototype.js"></script>

    <script language="JavaScript">

      function changeStyle(){

        if(document.getElementById('test').style.display=='none'){

          alert("show");

          document.getElementById('test').style.display='block'

        }else{

          alert("hide");

          document.getElementById('test').style.display='none'

        }

      }

    </script>

  </head>

  <body>

    <input value="测试" type="button" onclick="changeStyle()">

    <select type="button" value="测试" onchange="changeStyle();">

      <option>1</option>

      <option>2</option>

    </select>

    <table>

      <tbody id="test"><!--tbody替代了div的作用-->

      <tr>

      <td>

      <input type="text" value="1"/>

    </td>

      </tr>

      </tbody>

    </table>

  </body>

</html>

table与div互相嵌套注意的更多相关文章

  1. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  2. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  3. div里嵌套了img底部会有白块问题和图片一像素问题解决

    div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...

  4. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  5. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  6. div中嵌套img元素，4px空白

    写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...

  7. div中嵌套div中使用margin-top失效问题

    div中嵌套div中使用margin-top失效问题

  8. table 和 div 简单布局

    table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  9. jquery 实践操作：div 动态嵌套页面

    此篇记录如何在指定 div 中嵌套一个页面 load() 方法: 1. 使用 $.load() 直接导入一个页面 $('#addPage_div').load("temp/handle.ht ...

随机推荐

  1. Docker入门系列02

    上篇用一个简单的示例,简单的介绍了 Dockerfile 的配置及其相关的命令.这一篇会在上篇的示例程序里,继续添加新代码及如何将单元测试也放入 Image 建立过程内. 首先,我们需要建一个新的类库 ...

  2. 关于条件约束问题的无偏差统计——一个偏差控制型生成器（Unbiased Statistics of a Constraint Satisfaction Problem – a Controlled-Bias Generator——by Denis Berthier）

    论文地址:https://hal.archives-ouvertes.fr/hal-00641955 Unbiased Statistics of a Constraint Satisfaction ...

  3. 20154327 Exp3 免杀原理与实践

    实践内容 基础问题回答 (1)杀软是如何检测出恶意代码的? 杀毒软件主要靠特征码进行查杀,匹配到即为病毒. 还有通过云查杀,查看云端库中该文件是否属于恶意代码. 跟踪该程序运行起来是否存在恶意行为,来 ...

  4. SDWebImage的原理 和 实现机制 --- tableView 滑动卡的问题

    一.原理 1)当我门需要获取网络图片的时候,我们首先需要的便是URl没有URl什么都没有,获得URL后我们SDWebImage实现的并不是直接去请求网路,而是检查图片缓存中有没有和URl相关的图片,如 ...

  5. Android Preference 设置偏好全攻略

    Android 设置是每个App必不可小的东西,看似很简单,但是初学不熟悉的很花时间去研究,特别样式兼容方面,以及有自定义设置的需求,下面是对用法做一个总结 Preference结构 界面结构看下图 ...

  6. 安装MySQLdb模块遭遇"fatal error: my_config.h: No such file or directory"的处理

    Issue       I encountered an error when I run the python script which need to import the module of & ...

  7. oracle的数据对象

    oracle的数据对象包括表.视图.约束.序列.索引.函数.存储过程.包和触发器等. 这里主要介绍视图.序列.索引.触发器.存储过程 视图是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以 ...

  8. HDU - 6438（贪心+思维）

    链接:HDU - 6438 题意:给出 n ,表示 n 天.给出 n 个数,a[i] 表示第 i 天,物品的价格是多少.每天可以选择买一个物品,或者卖一个已有物品,也可以什么都不做,问最后最大能赚多少 ...

  9. 【转】unity3d 资源文件从MAX或者MAYA中导出的注意事项

    转自游戏开发主席   1.首先,Unity3d 中,导出带动画的资源有2种导出方式可以选择:    1) 导出资源时,只导出一个文件,保留模型,骨骼和所有的动作帧(把所有的动作,比如idle,atta ...

  10. java并发总览