Wednesday, April 20, 2005

I Hate Internet Explorer

Okay, I spent(wasted) an afternoon and about an hour of the night trying to pin down why my
appendChild() stuff wasn't working as expected. Would have helped if I would of known that was the problem sooner. Try this code out in IE and Firefox and look at the difference. Be sure to fix the script tag, blogger didn't like it :)

Not only do all of the entries work in Firefox, it accepts the css styles as well. IE accepts the tbody append but will not style the rows.


<html>
<head>
<style type="text/css">

.system { color: #FF0000; }

</style>
</head>
<body>

function drawTableInner(tbodyID)
{
var frag = document.createDocumentFragment();

var tr = document.createElement("tr");
tr.setAttribute("class", "system");

var td = document.createElement("td");
var td1 = document.createElement("td");


var span = document.createElement("span");

span.appendChild(document.createTextNode("Data Entered Again"));

span.setAttribute("style", "color: #00FF00");

td.appendChild(document.createTextNode("Data Entered") );
td1.appendChild(span);

tr.appendChild(td);
tr.appendChild(td1);

frag.appendChild(tr);

var tbody = document.getElementById(tbodyID);
tbody.appendChild(frag);
}

function drawTableIn(tbodyID)
{
var frag = document.createDocumentFragment();

var table = document.createElement("table");
var tr = document.createElement("tr");
tr.setAttribute("class", "system");

var td = document.createElement("td");
var td1 = document.createElement("td");


var span = document.createElement("span");

span.appendChild(document.createTextNode("Data Entered Again"));

span.setAttribute("style", "color: #00FF00");

td.appendChild(document.createTextNode("Data Entered") );
td1.appendChild(span);

tr.appendChild(td);
tr.appendChild(td1);

table.appendChild(tr);
frag.appendChild(table);

var tbody;

if (document.all)
{
tbodyID.innerHTML = "";
tbodyID.appendChild(frag);
}
else
{
tbody = document.getElementById(tbodyID);
}
tbody.appendChild(frag);
}

function drawHTMLTable(tbodyID)
{
document.getElementById(tbodyID).innerHTML="<table><tr class='system'><td>This is some new data</td></tr></table>";
}





<table>
<thead>
<tr>
<td>data</td>
</tr>
</thead>
<tbody id="tabledata" >
</tbody>
</table>

<div id="divdata">

</div>

<div id="div2data">

</div>

<script type='text/javascript'>
drawTableInner("tabledata");
drawHTMLTable("div2data"); <!-- put this below drawTableIn and watch it disappear in IE. IE SUCKS -->
drawTableIn("divdata");

</script>

</body>
</html>






posted by jgchristopher @ 8:04 PM

2 Comments:

At 5:50 PM, Anonymous Anonymous said...

This post is from 2005, but it's always nice to have followups, since people will probably still be landing here because of searches in 2105!

element.setAttribute("class",xxxx);

Doesn't work in IE. You have to use:

element.className = xxxx;

(I found that answer, along with a discussion of the tbody issue, over here. But I'm still searching for answers to other IE problems, which is how I tripped across this page.)

 
At 6:51 PM, Anonymous Anonymous said...

Another issue is that you can't set the style attribute using .setAttribute()

Yes, IE is THAT dumb!

Here's the bug!
http://webbugtrack.blogspot.com/2007/10/bug-245-setattribute-style-does-not.html

 

Post a Comment

<< Home