IE6-IE9中tbody的innerHTML不能赋值，重现代码如下

Js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IE6-IE9中tbody的innerHTML不能复制bug</title>
</head>
<body style="height:3000px">
<table>
<tbody>
<tr><td>aaa</td></tr>
</tbody>
</table>
<p>
<button id="btn1">GET</button><button id="btn2">SET</button>
</p>
<script>
var tbody = document.getElementsByTagName('tbody')[0]
function setTbody() {
tbody.innerHTML = '<tr><td>bbb</td></tr>'
}
function getTbody() {
alert(tbody.innerHTML)
}
btn1.onclick = function() {
getTbody()
}
btn2.onclick = function() {
setTbody()
}
</script>
</body>
</html>

两个按钮，第一个获取tbody的innerHTML，第二个设置tbody的innerHTML。

获取时所有浏览器都弹出了tr的字符串，但设置时IE6-9不支持，而且报错，如图

可以利用特性判断来看浏览器是否支持tbody的innerHTML设值

1
2
3
4
5
6
7
8
9
10
11
12
13
var isupportTbodyInnerHTML = function () {
var table = document.createElement('table')
var tbody = document.createElement('tbody')
table.appendChild(tbody)
var boo = true
try{
tbody.innerHTML = '<tr></tr>'
} catch(e) {
boo = false
}
return boo
}()
alert(isupportTbodyInnerHTML)

点击下，看看你此时浏览本博客的浏览器是否支持

Click Me

1
<script type="text/javascript">// <![CDATA[ var isupportTbodyInnerHTML = function () { var table = document.createElement('table') var tbody = document.createElement('tbody') var tr = document.createElement('tr') var td = document.createElement('td') var txt = document.createTextNode('a') td.appendChild(txt) tr.appendChild(td) tbody.appendChild(tr) table.appendChild(tbody) var boo = true try{ tbody.innerHTML = '<tr><td>b</td></tr>' } catch(e) { boo = false } return boo }(); tbodyInnerHTML.onclick = function() { if (isupportTbodyInnerHTML) { alert('你的浏览器支持tbody的innerHTML赋值') } else { alert('你的浏览器是IE6-9内核，不支持tbody的innerHTML赋值') } } // ]]></script>

对于IE6-IE9里如果要设置tbody的innerHTML，可以使用如下替代方法

Js代码

1
2
3
4
5
6
7
8
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
while(tbody.firstChild) {
tbody.removeChild(tbody.firstChild)
}
tbody.appendChild(div.firstChild.firstChild)
}

用一个div来包含一个table，然后删除tbody里的所有元素，最后给tbody添加div的第一个元素的第一个元素，即div>table>tr。

当然还有一个更精简的版本，它直接采用replaceChild方法替换

Js代码

1
2
3
4
5
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}

ie tbody table 兼容方法的更多相关文章

  1. placeholder兼容方法（兼容IE8以上浏览器）

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  2. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  3. SAP ABAP规划 使用LOOP READ TABLE该方法取代双LOOP内部表的方法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVlemhhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  4. JavaScript后台代码操作HTML TABLE的方法

    原文:JavaScript后台代码操作HTML TABLE的方法 var rowNum = 0,fileNum = 0; //行号与列号 var oNewRow; //定义插入行对象 var oNew ...

  5. js 拼接table 的方法

    <html> <head> <title>test page</title> <script type='text/javascript'> ...

  6. AJAX原理解析与兼容方法封装

    AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

  7. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  8. CSS3新特性，兼容性，兼容方法总结

    css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4 ...

  9. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

随机推荐

  1. webDriver API——第10部分Chrome WebDriver

    class selenium.webdriver.chrome.webdriver.WebDriver(executable_path='chromedriver', port=0, chrome_o ...

  2. ionic emulate android log

    RubertdeMacBook-Pro:myApp Rubert$ ionic emulate android Running command: /Users/Rubert/myApp/hooks/a ...

  3. ISP封了80和8080端口

    今天用自己的电脑做服务器,绑定了域名,路由映射什么的都做了,但是80和8080端口在外网怎么都访问不了,只在内网可以访问. 最后看有人说联通封了80和8080端口,真是遗憾,谨记于此,以后有时间了再来 ...

  4. windowsclient开发--怎样測量一个字符串显示的物理长度

    首先须要说明的是,我所说的字符串的长度,不是string的length,也不是string的size.我指的是显示的长度.即物理长度. 缘由: 之所以要提到这个.是由于遇到了一些问题. 再使用duil ...

  5. win7配置两个tomcat（8 & 7）

    背景如下: 电脑中原先tomcat版本是tomcat8,现在要再在其中另配置一个tomcat7,原先tomcat8的配的端口是8089 步骤如下: 1.官网下载tomcat7压缩包解压 2.修改D:\ ...

  6. php 验证访问浏览器是电脑还是手机

    //判断如果为手机用户则 if(checkmobile()==true) { $url=$_SERVER["HTTP_HOST"]; $urlHost=GetHost($url); ...

  7. memcache基础知识-stats参数

    安装memcache: #tar -xvf libevent-1.4.13-stable.tar.gz#cd libevent-1.4.13-stable#./configure && ...

  8. hdu1243 最长公共子序列（LCS）

    原题地址 题目分析 这道题基本上是在普通LCS问题上的一点小小的变形,由求LCS的长度,改为求LCS的权值.架构还是不变的.可作为LCS问题的模板题.时间复杂度O(N^2). 注意 题目中的字母都是小 ...

  9. atitit.印度教与java宗教的特点与观念对比 attilax总结

    atitit.印度教与java宗教的特点与观念对比 attilax总结 1. Java就是一种宗教 1 2. Java的教义思想,社区理念,价值观念 2 2.1. 教学语言,类似与印度教的祭祀万能 2 ...

  10. 495. Implement Stack【easy】

    Implement a stack. You can use any data structure inside a stack except stack itself to implement it ...