`

解决ie下table,tr,td等的innerHTML只读问题

阅读更多
innerHTML:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

TR innerHTML problem in IE.

在ie下,对于COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR,innerHTML属性是只读的。也就是说你不能通过innerhtml对这些标签进行操作。

方法一:利用td支持innerHTML为他们添加,你可以仿照下面的例子为你需要的标签添加
table.tr.innerHTML = “namexxxx”; works in Firefox, but doesn’t work in IE.

Quick solution:

var table = document.getElementById(”yourtable”);
var rows = table.rows;

if(document.all) {
rows[0].swapNode(rows[1]); //
} else {
var t = rows[0].innerHTML;
rows[0].innerHTML = rows[1].innerHTML;
rows[1].innerHTML = t;
}


To solve “tr.innerHTML” doesn’t work in IE , below code works in firefox and IE
—————————————-
var otab = document.getElementById(”tab_me”); // you must specify table id.
var str = “”;
for(i=0; i< otab.rows[0].cells.length; i++) {
otab.rows[0].cells[i].innerHTML = “new content here”;
str += otab.rows[0].cells[i].innerHTML + “\n”;
}
alert(str);


方法二:讲table放到一个div里,利用div支持innerHTML来实现

document.getElementById(”yourtable”).firstChild=’’;

方法三:利用appendChild

此方法可以实现但是好像tr也不支持appendChild,需要trick一下
分享到:
评论

相关推荐

    IE 下的只读 innerHTML

    这个问题在IE浏览器中尤为突出,因为它对某些特定元素的`innerHTML`属性设为了只读。 在给定的问题中,开发者尝试通过JavaScript动态地向表格`&lt;table&gt;`的`&lt;tbody&gt;`元素添加新的`&lt;tr&gt;`行。在Firefox中,这样的操作是...

    IE bug table元素的innerHTML

    然后,更令人沮丧的是,IE6不仅对`table`元素的`innerHTML`处理有误,还有一系列其他只读的元素,包括`COL`、`COLGROUP`、`FRAMESET`、`HTML`、`STYLE`、`TABLE`、`TBODY`、`TFOOT`、`THEAD`、`TITLE`和`TR`等。...

    innerHTML在IE中报错解决方案

    原因在于,IE9及以下版本对table及其子元素tr的innerHTML属性进行了限制,将其视为只读属性。这意味着可以读取这些元素的innerHTML,但无法通过innerHTML来修改它们。相比之下,td元素的innerHTML在IE9及以下版本是...

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

    其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格(Table)或选择列表(Select)的内容,但在IE6、7、8、9版本中,这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容,但在...

    IE6-IE9不支持table[removed]的解决方法分享

    总结来说,解决IE6-IE9不支持`table.innerHTML`的问题,需要借助于创建临时元素和操作DOM结构的方法。这个方法不仅适用于`table`元素,也可以扩展到其他不支持`innerHTML`的元素,以实现类似的功能。同时,随着...

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

    从微软的MSDN文档中可以了解到,在IE6-IE9中,`innerHTML`属性对于`col`、`colGroup`、`frameset`、`html`、`head`、`style`、`table`、`tBody`、`tFoot`、`tHead`、`title`和`tr`对象来说是只读的。因此,对于这些...

    JavaScript Table行定位效果

    第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到...

    jsp\(二)未知的运行时错误(ie6的未指明的错误) .doc

    在使用JSP开发Web应用程序的过程中,可能会遇到一个特定的问题:即在Internet Explorer 6浏览器下出现“未指明的错误”,而在较新的版本如IE7和IE8中则显示为“未知的运行时错误”。这个问题主要发生在对某些HTML...

    js动态生成行列,并能够动态改变只读属性

    JavaScript可以用于动态创建和插入`&lt;tr&gt;`(行)和`&lt;td&gt;`(单元格)元素。例如,你可以创建一个函数,接受行数和列数作为参数,然后使用`document.createElement()`创建新元素,并使用`appendChild()`将它们添加到...

    javascript inneHTML的地雷

    回顾一下,IE会把标签内前面的一些空白kill掉,还会把它里面标签统统大写,会显示动态添加的属性,在某些元素中,它还是只读的。这个由IE发明的东西,最后被爆如此多缺陷,真是令人心寒。不过innerHTML还有一地雷,...

    HTML对象简介

    - **Table**: `&lt;table width="599" height="89" border="1" cellpadding="2" cellspacing="3"&gt;&lt;tr&gt;&lt;td&gt;&nbsp;&lt;/td&gt;&lt;td&gt;&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;` - **Input**: `...

Global site tag (gtag.js) - Google Analytics