When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
</head>
<body>
<table id="gst">
<tr>
<td>Rent</td>
<td>BR</td>
<td>Name</td>
<td>Street</td>
<td>Date</td>
</tr>
<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
</tr>
</table>
<script type="text/javascript">
function showTable(){
table = document.getElementById('gst');
var x=table.insertRow(1);
var y=x.insertCell(0);
var z=x.insertCell(1);
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');
cl="odd";
x.setAttribute('class',cl);
x.setAttribute('onmouseover','this.className="over "');
x.setAttribute('onmouseout','this.className="'+cl+ '"');
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
}
showTable();
</script>
</body>
</html> 3  1793 
Mahmoud wrote : When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
</head>
<body>
<table id="gst">
<tr>
<td>Rent</td>
<td>BR</td>
<td>Name</td>
<td>Street</td>
<td>Date</td>
</tr>
<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
</tr>
</table>
<script type="text/javascript">
function showTable(){
table = document.getElementById('gst');
Right here, you are creating a second table which will have the same id
attribute value as the first one. Id attribute value must be
document-unique.
http://www.w3.org/TR/html401/struct/global.html#adef-id
You also have declare table as a global variable... when it doesn't seem
necessary to do so.
var x=table.insertRow(1);
You need to create a tbody first and append it to the table first; MSIE
requires this in order to be able to insert row to it.
var y=x.insertCell(0);
var z=x.insertCell(1);
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');
This won't work.
x.onclick = new Function ("evt", "openWindow('1, lease_list');");
cl="odd";
x.setAttribute('class',cl);
You should avoid resorting to setAttribute() because IE has a number of
flaws, bugs on this method. And you can avoid declaring the cl variable.
x.className = "odd";
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-95362176
x.setAttribute('onmouseover','this.className="over "');
x.onmouseover = new Function("evt", "this.className = 'over';");
x.setAttribute('onmouseout','this.className="'+cl+ '"');
x.onmouseover = new Function("evt", "this.className = 'odd';");
y.innerHTML="NEW CELL1";
y.appendChild(document.createTextNode("NEW CELL1"));
z.innerHTML="NEW CELL2";
z.appendChild(document.createTextNode("NEW CELL2"));
}
showTable();
You should call the showTable() only and only when the document has been
fulled loaded and parsed and once the DOM tree has been built: this is
for best results (speed, memory management, avoid crashing on some other
browsers, etc.). It may work while loading the document but I would
still discourage such coding practice.
</script>
</body>
</html>
Not tested.
Gérard
--
remove blah to email me
Mahmoud wrote: When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
IE does not support XHTML. Use HTML 4.01 Strict, that suffices here, and
makes using possibility of inner_HTML_ reasonable in the first place.
<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
In XHTML, as an XML application, the stylesheet must be referenced
in an XML Process Instruction before the DOCTYPE declaration:
<?xml-stylesheet type="text/css" href="css/1.css"?>
It only worked with `link' because the XHTML was rendered as error-corrected
HTML as you served it as text/html. Serve XHTML as application/xhtml+xml
(then you will recognize that IE does not support it.)
</head>
<body>
<table id="gst">
[...]
<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>
Users without client-side scripting will not be able to use the table as
intended. Use <a href="..." onclick="...; return false;">...</a> instead.
[...]
<script type="text/javascript">
function showTable(){
table = document.getElementById('gst');
Of course, you are _not_ creating a new table with the same ID here.
But since you do not declare the `table' identifier, you try to add a
globally available property. That may not be possible in IE, because
there is an object before the Global Object in the scope chain that
does not allow adding properties with certain names. Try
var table = ...;
instead.
var x=table.insertRow(1);
var y=x.insertCell(0);
var z=x.insertCell(1);
Missing feature tests.
<URL:http://pointedears.de/scripts/test/whatami#inference>
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');
There is no point in this concatenation.
x.setAttribute('onclick', 'openWindow(1, lease_list)');
But setAttribute() has buggy implementations, so you should avoid it.
Use
x.onclick = function()
{
openWindow(1, lease_list);
};
or (IE4-proprietary)
x.attachEvent(
'onclick',
function()
{
openWindow(1, lease_list);
});
or (standards compliant)
x.addEventListener(
'click',
function()
{
openWindow(1, lease_list);
},
false);
For maximum compatibility, you should combine those approaches.
See also <URL:http://pointedears.de/scripts/dhtml.js>.
cl="odd";
var cl = "odd";
x.setAttribute('class',cl);
x.className = cl;
x.setAttribute('onmouseover','this.className="over "');
x.setAttribute('onmouseout','this.className="'+cl+ '"');
See above.
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
Avoid `innerHTML' if the new content is only a text node.
function isMethod(a)
{
var t;
return (a && ((t = typeof a) == "function" || t == "object")));
}
if (isMethod(y.appendChild)
&& isMethod(z.appendChild)
&& isMethod(document.createTextNode))
{
y.appendChild(document.createTextNode("NEW CELL1"));
z.appendChild(document.createTextNode("NEW CELL2"));
}
else if (typeof y.innerText != "undefined"
&& typeof z.innerText != "undefined")
{
y.innerText = "NEW CELL1";
z.innerText = "NEW CELL2";
}
else if (typeof y.innerHTML != "undefined"
&& typeof z.innerHTML != "undefined")
{
y.innerHTML = "NEW CELL1";
z.innerHTML = "NEW CELL2";
}
Another possibility for a combining wrapper method here.
}
showTable();
PointedEars
Gérard Talbot wrote: Mahmoud wrote :
When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
There is little to recommend XHTML. There is certainly nothing in the
posted code to suggest it is necessary, use HTML unless you have a really
good reason for using XHTML.
<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
When styles are part of the problem, you need to include a minimal style
element so the code works as posted.
Your markup is invalid without a title element.
</head>
<body>
<table id="gst">
[...]
</table>
<script type="text/javascript">
function showTable(){
table = document.getElementById('gst');
Right here, you are creating a second table which will have the same id
attribute value as the first one.
Not at all. 'table' is a reference to the existing table with id='gst'.
[...] You also have declare table as a global variable... when it doesn't seem
necessary to do so.
var x=table.insertRow(1);
You need to create a tbody first and append it to the table first; MSIE
requires this in order to be able to insert row to it.
A tbody is created when the HTML for the table is parsed, so the fact that
the browser has already parsed the HTML for the subject table means it has
a tbody.
inesertRow() is a method of the table interface and is intended to be used
exactly as the OP has used it, that is:
tableElementReference.insertRow(index)
<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>
var y=x.insertCell(0);
var z=x.insertCell(1);
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');
This won't work.
Yup. Also, to the OP, where is 'lease_list' defined?
cl="odd";
x.setAttribute('class',cl);
You should avoid resorting to setAttribute() because IE has a number of
flaws, bugs on this method. And you can avoid declaring the cl variable.
I'll add that the OP should also have included a style element with the
required classes defined. Nothing worse than having work out what is
broken because of errors and what has simply been omitted.
x.className = "odd";
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-95362176
x.setAttribute('onmouseover','this.className="over "');
x.onmouseover = new Function("evt", "this.className = 'over';");
Hmmm. Calling the Function object as a constructor is not liked and should
probably be avoided where possible. There seems little point in passing
'evt'. Try:
x.onmouseover = function(){this.className = 'over';};
Looking at the event might be useful if the OP had a generic function that
used the event type to work out whether to highlight the row or return it
to odd/even class, but that doesn't seem to be happening here.
x.setAttribute('onmouseout','this.className="'+cl+ '"');
Where was 'cl' defined? Is it a variable or string value?
[...] }
showTable();
You should call the showTable() only and only when the document has been
fulled loaded and parsed and once the DOM tree has been built: this is
for best results (speed, memory management, avoid crashing on some other
browsers, etc.). It may work while loading the document but I would
still discourage such coding practice.
Maybe, but then users will see the page load and render, then the new
elements get added.
Which browsers have difficulty with elements being added while the page loads?
[...]
--
Rob This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: viator |
last post by:
Hello everybody. I am a student doing my masters in Comp. Sci. Will
some explain to me why it seems completely two worlds when taking
about DHTML in NN and IE. Is there any way to write truly...
|
by: Web Master |
last post by:
The following works in Internet Explorer 6 and Opera, but not Netscape 7.1.
Is there any way to make this work in all three browsers?
<html>
<head>
<title>Menu</title>
</head>
<body>
<div...
|
by: Chris Leonard |
last post by:
Hi.
I've copied some code from a book which will enable me to make a layer
around a page, my aim is to do something a little more complex but this I
thought would get me started.
Anyway, I've...
|
by: Dafydd |
last post by:
I have the following Script in my web page reduce to two pages.
<script>
function details()
{
document.getElementById('details').style.visibility='visible';...
|
by: Brett |
last post by:
Both make use of DIV tags or layers. What are the main differences between
DHTML and style sheets?
Also, what type of problems might an author experience in the way of
incompatibilities? For...
|
by: A. Nonymous |
last post by:
I am trying to write a function that will centre a DIV-layer into the middle of the web browser screen. This is only for Internet Explorer. I keep getting and Invalid Argument error whenever I call...
|
by: Tarik Monem |
last post by:
I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...
|
by: cjparis |
last post by:
Hello everyone. If anyone can give me a hand I would be gratefull
Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...
|
by: Berlin Brown |
last post by:
http://www.w3schools.com/htmldom/prop_frame_scrolling.asp
I want to be able to get this example working with Internet explorer.
it works fine in firefox. Does anyone have an idea how to resolve...
|
by: ninhovid |
last post by:
Hi...
i'm new at dhtml, and i want to use it in help windows (instead of window.open() of javascript)...
i'm done it... but it works only in internet explorer.. in firefox 2 and 3 it opens the...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
