1. 程式人生 > >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="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)

對於IE6-IE9裡如果要設定tbody的innerHTML,可以使用如下替代方法

複製程式碼程式碼如下:
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方法替換

複製程式碼程式碼如下:
function setTBodyInnerHTML(tbody, html) {
    var div = document.createElement('div')
    div.innerHTML = '<table>' + html + '</table>'
    tbody.parentNode.replaceChild(div.firstChild.firstChild, tbody)
}

從MSDN上記錄上看 col、colGroup、frameset、html、head、style、table、tfoot、tHead、title和tr的innerHTML都是隻讀的(IE6-IE9)。

The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

You can change the value of the title element using the document.title property.

To change the contents of the table, tFoot, tHead, and tr elements, use the table object model described in Building Tables Dynamically. However, to change the content of a particular cell, you can use innerHTML.

相關推薦

IE6/IE7/IE8/IE9tbody的innerHTML不能完美解決方案

IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值,重現程式碼如下 複製程式碼程式碼如下: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8"/>    

bootstrap支援ie8IE6 IE7 IE8 IE9 IE10 IE11支援Bootstrap的解決方法

標籤: Bootstrap是一個響應式的佈局,你可以在寬屏電腦、普通電腦,平板電腦,手機上都得到非常優秀的佈局體驗。這種響應式的佈局正是通過CSS3的媒體查詢(Media Query)功能實現的,根據不同的解析度來匹配不同的樣式。IE8瀏覽器並不支援這一優秀的Css3特性,Bootstrap在開發文件中寫

IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解決方法

插件 tar ie7 http aik html href ots str      Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap是基於HTML5和CSS3開發的,它在jQuery的基礎上進行了更為個性化的完善,形成一套自己獨有的網

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法(非原創)

需要 通過 是我 point 一定的 oba 對象 important not div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法 1.DOCTYPE 影響 CSS 處理 2.FF: div 設置 margi

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

網頁 可讀性 處理 widgets 命令 固定 允許 track 屏幕 300px!important;width /**/:340px;margin:0 10px 0 10px} ,關於這個/**/是什麽我也不太明白,只知道IE5和firefox都支持但IE6不支

div+css 完全相容ie6 ie7 IE8 IE9 和firefox方法

簡單方法: IE6,IE7,IE8,FF的相容方法(2) 瀏覽器相容程式碼: 瀏覽器 符號 IE6 IE7 IE8 FF * !important _ \9 *html *+html 說明:代表能識別; 代表不識別 1、 案例一(常用) 如果各個瀏覽器的高度都不相同,程式碼如

CSS相容IE6/IE7/IE8/IE9/IE10的通用方法

一、CSS HACK 以下兩種方法幾乎能解決現今所有HACK. 1, !important 隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該宣告位置需要提前.) 以下為引用的內容: <style> #wrapper { width

CSS完美相容IE6/IE7/IE8/IE9/IE10的通用方法

一、CSS HACK 以下兩種方法幾乎能解決現今所有HACK. 1, !important 隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該宣告位置需要提前.) 以下為引用的內容: <style> #wrapper {

輕鬆搞定各版本IE相容問題,IE6,IE7,IE8,IE9,IE10,IE11

在網站開發中不免因為各種相容問題苦惱,針對相容問題,其實IE給出瞭解決方案,Google也給出瞭解決方案,百度也應用了這種方案去解決IE的相容問題。解決這種相容問題只需要一行程式碼就可以了,先來看下百

一行程式碼解決各種IE相容問題,IE6,IE7,IE8,IE9,IE10

在網站開發中不免因為各種相容問題苦惱,針對相容問題,其實IE給出瞭解決方案Google也給出瞭解決方案百度也應用了這種方案去解決IE的相容問題 百度原始碼如下<!Doctype html> <html xmlns=http://www.w3.org/1999

一行程式碼輕鬆搞定各種IE相容問題,IE6,IE7,IE8,IE9,IE10

/* IE7/IE8.js - copyright 2004-2008, Dean Edwards */ 2 (function(){IE7={toString:function(){return"IE7 version 2.0 (beta)"}};var u=K();var v=/ie7_debug/.te

讓bootstrap相容ie6 ie7 ie8 ie9 ie10 ie11的解決方法

前兩天遇到要bootstrap相容ie各個版本的問題,但是各種百度,各種部落格,最後算是解決了,但是迷迷糊糊的,現在來總結一下,如有雷同純屬總結。 首先看看程式碼的模樣: <html>

【CSS筆記之五】IE6/IE7/IE8下float:right的異常及其解決方法

示例分析程式碼: <div id="channel_tit" class="round_top"> <span class="rtl rtl1"></span> <h2>安卓首頁><a href=

Java 在匿名內部函式為外部函式變數解決方案

新人一枚,請多包涵。    Java匿名內部函式本人不怎麼主動使用,但是經常會呼叫一些API,其中會呼叫一些介面,而這些介面是需要使用匿名內部類來實現的,於是就遇到了一些問題。    就比如okHttp3 的介面呼叫 OkHttpClient okHttpClient = n

art.Dialog.open:IE6/IE7/IE8下無法開啟嵌入頁面的解決方法

專案中用到了art.Dialog,就是用art.Dialog.open開啟嵌入頁面,在火狐等瀏覽器都正常, 但是IE6/IE7/IE8下一直無法無法嵌入開啟頁面, 原因是href=”javascript:;” 引起的, 去掉 href=”javascript:;”後,正常

【bootstrapValidator】bootstrapValidator對隱藏域驗證,外掛不能捕獲“程式事件”解決方案

1. 賦值之後觸發一次“change”事件 //bootstrapValidator這個外掛不能捕獲這樣的“程式賦值事件”,所以這裡不能達到驗證的效果。 //解決辦法:賦值之後觸發一次“change”事件 $("#result").val(result).change(); 2.e

怎麽用css hack處理各瀏覽器兼容IE6IE7,IE8,IE9/ FF

過濾 提醒 fire 混亂 不一致 rst 位置 兼容性問題 sina 第一:什麽事瀏覽器兼容性   瀏覽器兼容性問題又被稱為網頁兼容性或網站兼容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和制作中,做好瀏覽器兼容,才能夠讓網

(轉)如何在ie6/ie7/ie8實現iframe背景透明

最近做了一個專案,涉及到ie8iframe背景透明的問題,做了老半天,才把它搞定的,現在把我的經歷貼出來和大家分享: 眾所周知的根據W3C CSS 2.1 規範規定,''''background-color'''' 特性的預設值為 ''''transparent''''

[轉]CSS設定div最小高度(支援IE6, IE7, IE8, FF等瀏覽器)

在CSS中設定div(及其他塊元素)的最小高度時,可以用min-height,但是此屬性並不支援IE6及IE6以下的IE版本,這裡有一個比較好的辦法來解決設定div最小高度時在各個瀏覽器之間的相容性問題,適用於IE5.5、IE6、IE7、IE8、IE9、Firefox、G

zhlan--【偷】Python運算符

運算 alt ges 比較 images pytho 比較運算符 賦值 技術分享 >>>>Python中的賦值運算符: >>>>Python中的比較運算符: zhlan--【偷】Python中的賦值運算符