table不能遗露了tbody
1.假如创建一个空表 ,然后去设置它的innerHTML,并获取表单的高度;在ie10及其他的浏览器中,会像预期一样正常被解析出来;
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <style> *{margin: 0;padding:0} </style> </head> <body> <div id="demo"></div> <p id="demo1">some <em>message</em> \t and some leveal</p> <table id = "table" border="1" style="height: 200px;background: red;"></table> <input type="text" id="input1"> <script type="text/javascript"> $table = document.getElementById('table') $tr = document.createElement('tr') try{ $table.innerHTML = '<tr><td>some message</td></tr>' }catch(ex){} document.getElementById('input1').value = $table.currentStyle['height'] </script> </body>
</html>
在ie8,ie9中报错,浏览器会渲染出table,并把它展现在页面上,但不会渲染出里面的内容,(解析结果为 <table id="table" style="height: 200px; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-size: auto; background-origin: padding-box; background-clip: border-box; background-color: red;" border="1">)
在ie6,ie7中报错,浏览器会渲染出table,但不会把它展现在页面上,(解析结果为<table id="table" style="height: 200px; background-image: none; background-attachment: scroll; background-repeat: repeat; background-position-x: 0%; background-position-y: 0%; background-color: red;" border="1"><tbody/>)
通过其解析结果可以看出,浏览器都将它样式解析完成。我们可以通过currentStyle[attr]来获取样式,但不同点在于,ie6 ie7不会展现在页面上,意思就是在ie6 7的页面上,没有table的存在,它在页面中的位置没有了,但我们可以通过获取样式取到它的值,就像它是display:none一样,ie8 9中,table会展现在页面上,但其中没有任何内容
截图如下
2.假如创建一个没有tbody的非空表单,并给它添加一行,获取它的高度;
<!DOCTYPE html>
<html> <head> <title>改变元素里面的内容</title> <meta charset="utf-8"> <style> *{margin: 0;padding:0} </style> </head> <body> <div id="demo"></div> <p id="demo1">some <em>message</em> \t and some leveal</p> <table id = "table" border="1" style="height: 200px;background: red;"> <tr><td>default message</td></tr> </table> <input type="text" id="input1"> <script type="text/javascript"> $table = document.getElementById('table') $tr = document.createElement('tr') try{ $tr.innerHTML = '<tr><td>new message</td></tr>' $table.appendChild($tr) }catch(ex){} document.getElementById('input1').value = $table.currentStyle['height'] </script> </body> </html>
只会在ie6 7中添加失败,在ie8 9中会被正常添加进去,但会解析的不一样,截图如下
ps:
1)所有浏览器(除ie6审核不了元素,原码没有tbody)都会隐式的创建tbody
2)ie6 7不能添加新的一行到tbody,ie7中的会被解析成,(新添加进的tr被加到了tbody外,因此,不能成功解析)
3) 成功添加后
a) ie ff 新添加进的tr会和原来的tr平分表单的高度,其余的只会是浏览器本身默认的tr的高度
b) ie10 ff会将新添加进的一行内容垂直居中,其余的不会
c) webkit内核的浏览器的table的高度为198px,其余的为200px (原因是webkit的会把border去除,但ff不会去除)
table不能遗露了tbody的更多相关文章
- table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- table标签中thead、tbody、tfoot的作用
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...
- table固定头部,表格tbody可上下左右滑动
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: <div class="table_box_big"> ...
- 关于table的一些记录
HTML有10个表格相关标签 <caption> 表格的大标题,该标记可以出现在<table> 之间的任意位置.它对于搜索引擎的机器人记录信息十分重要.参数有align.val ...
- javascript: 带分组数据的Table表头排序
如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...
- js实现table排序-sortable.js
方案一.引用sortable.js包 /* <th class="thcss" style="width: 40px;" onclick="so ...
- 收集的冻结table 标题和左侧(完美)
<html> <head> <meta name="viewport" content="width=device-width&q ...
- 获取table表格的一些不为人知的属性
JS获取表格的简便方法:获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells 使用实例: oTable. ...
- 一天搞定CSS:表格(table)--19
1.表格标签 表格标签的嵌套关系 <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列 ...
随机推荐
- Linux修改时间时区并在Tomcat中生效
Linux查看当前时间时区linux:~ # datelinux:~ # date –Rlinux:~ # zdump -v /usr/share/zoneinfo/Asia/Beijing ---- ...
- php 之 PDO数据访问抽象层(0513)
PDO(PHP Data Objects)是一种在PHP里连接数据库的使用接口. PDO与mysqli曾经被建议用来取代原本PHP在用的mysql相关函数, 基于数据库使用的安全性,因为后者欠缺对于S ...
- 分享QQ第三方登陆SDK
主要是考虑到QQ的PHP SDK写的真是太烂了,纯属是普及API知识,而不是到手就可以部署的类库..反正自己都写了一个了,就拿出来分享下.. 什么也不多说,直接上代码. Qq_sdk.php < ...
- Apache配置rewrite
最近将代码做了迁移,更换了web服务器,从原来的Nginx,换成使用Apache,多少有些区别.这里整理一下在apache下实现rewrite功能. 第一部分:修改apache配置文件支持rewrit ...
- c++ 连接数据库
#include <icrsint.h> #include<iostream> #include<iomanip> #include <string> ...
- Lintcode--006(交叉字符串)
Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2. Ex ...
- HDU 4116 Fruit Ninja
http://acm.hdu.edu.cn/showproblem.php?pid=4116 题意:给N个圆,求一条直线最多能经过几个圆?(相切也算) 思路:枚举中心圆,将其他圆的切线按照极角排序,并 ...
- FreeBSd ports 安装软件
1.ports的目录在/usr/ports2.POSTS安装软件有时可能这个包已经安装过了,会有提示,无法 继续安装.能够用提示中的参数:#make install clean FORCE_PKG_R ...
- [置顶] android之存储篇_SQLite数据库_让你彻底学会SQLite的使用
SQLite最大的特点是你可以把各种类型的数据保存到任何字段中,而不用关心字段声明的数据类型是什么. 例如:可以在Integer类型的字段中存放字符串,或者在布尔型字段中存放浮点数,或者在字符型字段中 ...
- python高级编程之我不测试
# -*- coding: utf-8 -*-__author__ = 'Administrator'#测试驱动开发(高级编程处学习,第11章)#测试驱动开发也叫TDD, 是制造高质量软件的一种简单技 ...