IE6-IE9中tbody的innerHTML不能赋值的解决方法

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

Js代码

<!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设值

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

<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代码

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代码

function setTBodyInnerHTML(tbody, html) {
var div = document.createElement('div')
div.innerHTML = '<table>' + html + '</table>'
tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}
赞 (0)

相关推荐

  • js的.innerHTML = ""IE9下显示有错误的解决方法

    问题: 在用js动态创建html页面时: 复制代码 代码如下: var tab = document.createElement("table"); tab.innerHTML += "<td>订货单号</td>"+ "<td>单据日期</td>"+ "<td>商品类型</td>"+ "<td>订单属性</td>"

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • IE6-IE9使用JSON、table.innerHTML所引发的问题

    IE6-IE9使用JSON、table.innerHTML所引发的问题

    一.在IE兼容模式中以及各具有IE内核的浏览器兼容模式中使用  jQuery 中的JSON函数时出现"JSON未定义"  而切换到浏览器高速模式则正常显示 解决方案 : 1.直接在使用的页面中引入json2.js (https://github.com/douglascrockford/JSON-js/blob/master/json2.js)引入方法不再赘述. 2.在页面的公共js方法里判断 if(typeof JSON == 'undefined'){ $('head').appe

  • IE6-IE9不支持table.innerHTML的解决方法分享

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3000px"> <table&

  • IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML赋值会报错,如下 IE6/7/8/9中TABLE的innerHTML不能赋值 try{ var table = document.createElement('table'); table.innerHTML = ' Test table innerHTML ' document.body.appendChild(table); }catch(e){ alert(e); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • IE9 IE8 ajax跨域问题的快速解决方法

    网上解决办法均是 在发起请求之前添加 jQuery.support.cors=true;但是,线下测试,是ok的,一放到服务器上,又出现了新的eroor:readyState: 0, status: 0, statusText: "Error: 拒绝访问... 最后,问题是这样解决的,点击IE浏览器的的"工具->Internet 选项->安全->自定义级别"将"其他"选项中的"通过域访问数据源"选中为"启用&

  • Go中http超时问题的排查及解决方法

    背景 最新有同事反馈,服务间有调用超时的现象,在业务高峰期发生的概率和次数比较高.从日志中调用关系来看,有2个调用链经常发生超时问题. 问题1: A服务使用 http1.1 发送请求到 B 服务超时. 问题2: A服务使用一个轻量级http-sdk(内部http2.0) 发送请求到 C 服务超时. Golang给出的报错信息时: Post http://host/v1/xxxx: net/http: request canceled while waiting for connection (C

  • Swift 3中使用FMDB遇到的问题与解决方法

    Swift 3中使用FMDB遇到的问题与解决方法

    本文主要给大家介绍了关于在Swift 3中使用FMDB遇到的问题与解决方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 状况 OC项目转Swift,打算继续使用FMDB.Cocoapods进来后,在桥接文件 "XXX-Bridging-Header.h" 中写入#import "FMDB.h". 编译报错,如下图所示. Cocoapods Podfile platform :ios, '10.0' use_frameworks! targetsArray =

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    今天myeclipse里部署了之前做的一个测试项目,发现jsp里的$符号tomcat启动后页面上显示出来了,百度搜了下别人也有类似的问题出现过.经提醒原来是web.xml配置的version设置的是2.5而我tomcat5启动的.是tomcat的版本低于web的版本,从而导致$符号不能正常使用. 后将tomcat5改用tomcat6.jdk采用1.6 启动spring2.5项目.$显示问题解决. 以下是网上摘录的详细说明: 在jsp页面中用表达式语言中的$符号,如${pageScope.titl

  • Android中EditText 设置 imeOptions 无效问题的解决方法

    有时候我们需要在EditText  输出完之后 需要在键盘出现 右下角变成"Go"或"前往 搜索时:通常我们需要设置Android:imeOptions属性.Android:imeOptions的值有actionGo. actionSend .actionSearch.actionDone等 但是今天我发现设置了无效  那是因为我设置了 android:maxLines="1" 解决方法 就是去掉 android:maxLines="1"

  • PHP中file_exists()判断中文文件名无效的解决方法

    本文实例讲述了PHP中file_exists()判断中文文件名无效的解决方法.分享给大家供大家参考.具体方法如下: php中判断文件是否存在我们会使用file_exists函数或is_file函数,但在使用file_exists时如果你文件名或路径是中文在uft8编码文档时是无效.本文就来解决此问题,下面我们一起来看看. 定义和用法: file_exists() 函数检查文件或目录是否存在. 如果指定的文件或目录存在则返回 true,否则返回 false. 例子1 复制代码 代码如下: <?ph

  • PHP中__autoload和Smarty冲突的简单解决方法

    本文讲述了PHP中__autoload和Smarty冲突的简单解决方法.分享给大家供大家参考,具体如下: 一.问题: 最近,在项目中发现,PHP 的 __autoload 方法失效了.调试了好久,百思不得其解,查了下资料才知道原来是 Smarty 的原因.新版的 Smarty 改变了autoload的方式. 二.解决方法: 在 Smarty 的包含类文件后加一段代码,spl_autoload_register("__autoload"); 如下: <?php define('RO

随机推荐