By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,566 Members | 1,741 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,566 IT Pros & Developers. It's quick & easy.

DOM alteration rendering

P: n/a
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").appendChi ld(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>
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
alexandre damiron wrote:
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").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);

I would approach this differently:
newtd.className="imagebutton"
Forget about "height", no such attribute for a <td>

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;
I don't think the table element has a "refresh()" method
document.recalc(true);
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>


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

Mick
Jul 23 '05 #2

P: n/a
"alexandre damiron" <wp*****@yahoo.com> wrote in message
news:42***********************@news.free.fr...
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").appendChi ld(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>


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(new Tr);

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)
{
// ...
}
}

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #3

P: n/a
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 damiron wrote:
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").appendChi ld(newtr);
newtr.appendChild(newtd);
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");
newtd.appendChild(oTextNode);


I would approach this differently:
newtd.className="imagebutton"
Forget about "height", no such attribute for a <td>

/*
var newli = document.createElement("LI");
document.body.appendChild(newli);
newli.appendChild(oTextNode);
*/
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("tableparatest").refresh() ;

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

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>

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

Mick

Jul 23 '05 #4

P: n/a
That was the problem. Thank you Grant.

Grant Wagner a écrit :
"alexandre damiron" <wp*****@yahoo.com> wrote in message
news:42***********************@news.free.fr...
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").appendC hild(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>

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(new Tr);

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)
{
// ...
}
}

Jul 23 '05 #5

P: n/a
alexandre damiron wrote:
Thank you Mick

[...]
alexandre damiron wrote: [...]
newtd.setAttribute("class", "imagebutton");
newtd.setAttribute("height", "100px");


Might also be worth considering using the style object rather
than setAttribute:

newtd.style.className = 'imagebutton';

[...]

--
Fred
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.