`
- 浏览:
107261 次
- 性别:
- 来自:
武汉
-
Table innerHTML -- work around
As many of you must have read or realised(i did) while working with it, MS Internet Explorer doesn't allow you to set the innerHTML property of any table related tag(table, thead, tbody, tr except for td). It says "Unknown Runtime Exception". You are provided with explicit methods to handle this. Like createRow, createCell and stuff... Also you can use W3C DOM append child.
Good way to make tables, but what if I have the Table Head defined in the HTML file and read the Table Body from a XML file as well defined string. I simply want to have this in the table... One way is I parse the string as XML and loop through the nodes creating the cells and so on (that is what I first did), But why do we need that unecessary processing. We don't have any method to parse the string and get into our DOM directly.
The work around I worked out is probably not the only or best, but works good.
suppose we have a variable sXmlBody which has all the table body rows defined like:
var sXmlBody = "<tr><td>cellOne1</td><td>cellTwo1</td><tr>" +
"<tr><td>cellOne2</td><td>cellTwo2</td><tr>" ;
Of course it will be created dynamically ;)
Now to add this to the DOM enclose it in actual table and tbody tags.
sXmlBody = "<table><tbody>" + sXmlBody + "</tbody></table>";
and get it in DOM parsed as HTML using a temp div
var tempDiv = document.createElement("DIV");
tempDiv.innerHTML = sXmlBody;
Now I can use W3C DOM to append the child from the temp div to the table in our document. Consider the id of the table in the HTML document id tableResults
var tableElement = document.getElementById("tableResult");
tableElement.appendChild(tempDiv.firstChild.firstChild);
If you are going to reload the table content, it will be useful to have an id for the tbody tag and use removeChild on the documents table with the tbody element as parameter.
I hope that's helpful to you all, and it works fine in Firefox too!
Till Next time . . . Happy coding
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
innerHTML-outerHTML-innerTEXT
innerHTML的简单应用
首先时飘忽不定的collapse的border,ie6偏偏...排查了半天,结果是IE的table元素为只读,不能使用innerHTML!!!! 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T
超全面javaweb第4天-_08_innerHTML属性
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
主要介绍了js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法,较为详细的分析了错误的原因及对应的解决方法,需要的朋友可以参考下
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...
Innerself – 使用innerHTML将React / Redux转换成50行代码
博文链接:https://aideqianfang.iteye.com/blog/246585
解决ajax返回innerHTML中javascript不能运行问题
document.getElementById("id").InnerHTML = "填充代码"; 替换成 $("#id").html("填充代码"); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> ...
js中innerHTML与innerText的用法与区别
overflow:hidden\"><div id=\"DataGroup2\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div id=\"DataFrame3\" style=\"position:relative;background:#000;...
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...
NULL 博文链接:https://newtime.iteye.com/blog/461125
在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("<div><p>Hello</p>...
demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } var MyMar=setInterval(Marquee,...
NULL 博文链接:https://wuzhengxuan.iteye.com/blog/1263906
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
千锋Web前端教程_48_日期对象_定时器和innerhtml