DOM alteration rendering

A

alexandre damiron

The following Addel function renders a new line on Mozilla but nothing
on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
explanation ? Thanks a lot.

<html>
<head>
<title>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh();
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>
 
M

Mick White

alexandre said:
The following Addel function renders a new line on Mozilla but nothing
on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
explanation ? Thanks a lot.

<html>
<head>
<title>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);
Click to expand...


I would approach this differently:
newtd.className="imagebutton"
/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh();
Click to expand...

I don't think the table element has a "refresh()" method
document.recalc(true);
Click to expand...

What is "recalc()" ?
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie"
width="600px" allowTransparency="true" scrolling="no"
style="border-width:0px; margin:0px" class="normal"
frameborder="0"></iframe>
Click to expand...

Where's the <iframe> "src", and what is "allowTransparency"?
[snip]

Mick
 
G

Grant Wagner

alexandre damiron said:
The following Addel function renders a new line on Mozilla but nothing
on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
explanation ? Thanks a lot.

<html>
<head>
<title>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh();
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>
Click to expand...

Whether or not it shows in your HTML code, the browser creates a <tbody>
element to contain the rows. You can not append a <tr> directly to a
<table>, you must append it to the <tbody>. The easiest thing to do is
simply include the <tbody> element in your HTML, then append to that:

<table ...>
<tbody id="myTbody">

and your code:

document.getElementById('myTbody').appendChild(newTr);

If you don't include the <tbody> in your HTML, then you must rely on
code to find it:

var myTable = document.getElementById('myTable');
if (myTable)
{
var myTbody;
for (var ii = 0; ii < myTable.childNodes.length; ++ii)
{
if ('tbody' == myTable.childNodes[ii].nodeName.toLowerCase())
{
myTbody = myTable.childNodes[ii];
break;
}
}
if (myTbody)
{
// ...
}
}
 
A

alexandre damiron

Thank you Mick
- working on "className" attribute is a better practice, you are right.
- yes, let's forget about the height. I'll take care of that. But I
should be able to read "Test if text". I think my line isn't in fact
displayed at all on IE while it is in Mozilla.
- Sorry for the Iframe. It is just a part of another dynamic loading
feature which has nothing to do with the current problem.
- Yes, recalc() and refresh() are microsoft-only functions created by
them to "patch" rendering difficulties on IE. It did not work in my case.
- The disabled 3 lines worked on IE when enabled, and output a point
line. It worked on Mozilla too, but in this case Mozilla does not output
the new line anymore, cause oTextNode is unique and can be assigned one
time only. This is normal. But what is that IE problem with newtr ? Does
IE limit output to one generation (no subchildren) ?

Mick White a écrit :
alexandre said:
The following Addel function renders a new line on Mozilla but nothing
on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
explanation ? Thanks a lot.

<html>
<head>
<title>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);
Click to expand...



I would approach this differently:
newtd.className="imagebutton"
/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh();
Click to expand...


I don't think the table element has a "refresh()" method
document.recalc(true);
Click to expand...


What is "recalc()" ?
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie"
width="600px" allowTransparency="true" scrolling="no"
style="border-width:0px; margin:0px" class="normal"
frameborder="0"></iframe>
Click to expand...


Where's the <iframe> "src", and what is "allowTransparency"?
[snip]

Mick
Click to expand...
 
A

alexandre damiron

That was the problem. Thank you Grant.

Grant Wagner a écrit :
The following Addel function renders a new line on Mozilla but nothing
on IE 6 , yet no error is parsed neither on IE nor Mozilla. Any
explanation ? Thanks a lot.

<html>
<head>
<title>Mozilla Rich Text Editing Demo</title>
<link rel=stylesheet href="./css/Flux.css" type="text/css" />

<script language="JavaScript" type="text/javascript">
function Addel(){
var newtr = document.createElement("tr");
var newtd = document.createElement("td");
var oTextNode = document.createTextNode("Test if text");
document.getElementById("tableparatest").appendChild(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh();
document.recalc(true);
}
}
</script>
</head>
<body onLoad="Addel()" >
<table id="tableparatest" cellpadding="0" cellspacing="0">
<tr>
<td>
<iframe id="edit" name="testnameie" width="600px"
allowTransparency="true" scrolling="no" style="border-width:0px;
margin:0px" class="normal" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td height="50px" class="imagebutton">static test</td>
</tr>
</table>
</body>
</html>
Click to expand...


Whether or not it shows in your HTML code, the browser creates a <tbody>
element to contain the rows. You can not append a <tr> directly to a
<table>, you must append it to the <tbody>. The easiest thing to do is
simply include the <tbody> element in your HTML, then append to that:

<table ...>
<tbody id="myTbody">

and your code:

document.getElementById('myTbody').appendChild(newTr);

If you don't include the <tbody> in your HTML, then you must rely on
code to find it:

var myTable = document.getElementById('myTable');
if (myTable)
{
var myTbody;
for (var ii = 0; ii < myTable.childNodes.length; ++ii)
{
if ('tbody' == myTable.childNodes[ii].nodeName.toLowerCase())
{
myTbody = myTable.childNodes[ii];
break;
}
}
if (myTbody)
{
// ...
}
}
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Image shifts to the right when export the page to pdf 4
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Having trouble centering contents of td ? 3
Help with my responsive home page 2
How to wrap <td> content . 16

Members online

Total: 37 (members: 3, guests: 34)
Robots: 436

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,052
Latest member
LucyCarper

Latest Threads

Top