DOM for IE and Firefox

A

Angel

I have an application with heavy usage of DOM

Initially the application was supposed to be only IE specific, but now
we need to support it for Firefox also.

As an example consider the following HTML

<html>
<head></head>
<body>
<table border="1" cellspacing="5" cellpadding="5" id="RCTable">
<tr>
<td>R1, C1</td>
<td>R1, C2</td>
<td>R1, C3</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
<td id="r2c3">R2, C3</td>
</tr>
</table>

<script language="JavaScript">
TableObject =
(document.getElementById('RCTable').getElementsByTagName('tr'));
alert(TableObject[1].childNodes[1].innerHTML);
</script>
</body>
</html>

In Firefox the alert displays "R2, C1"

However in IE the same alert displays "R2, C2"

How do I get both the browsers to read the same cells.?
How do i read the table contents in Firefox?
Does firefox support the innerText property?

Hope I make sense

Regards,
Angel
 
M

Martin Honnen

Angel wrote:

TableObject =
(document.getElementById('RCTable').getElementsByTagName('tr'));
alert(TableObject[1].childNodes[1].innerHTML);
Click to expand...
In Firefox the alert displays "R2, C1"

However in IE the same alert displays "R2, C2"
Click to expand...


There is a rows collection for table element objects and there is a
cells collection for table row (tr) elements which would allow you the
same access in Mozilla and Firefox and Opera.

Indexing childNodes to find an element node at a certain position does
not work cross browser without doing nodeType checks as the DOM tree
looks different, Mozilla includes white space text nodes in the DOM, IE
does not do that at all, Opera does it slightly different than Mozilla I
think.
 
R

Robin Rattay

Angel said:
TableObject =
(document.getElementById('RCTable').getElementsByTagName('tr'));
alert(TableObject[1].childNodes[1].innerHTML);

In Firefox the alert displays "R2, C1"
Click to expand...

Yup, that's the content, of the second child node. The first child node
is the textnode before the table cell containing of the four spaces you
used to indent the code.
However in IE the same alert displays "R2, C2"
Click to expand...

As usally wrong.
How do I get both the browsers to read the same cells.?
Click to expand...

By using the rows und cells properties:

TableObject = document.getElementById('RCTable');
alert(TableObject.rows[1].cells[1].innerHTML);
Does firefox support the innerText property?
Click to expand...

Nope. You are probably looking for:
alert(TableObject.rows[1].cells[1].firstChild.data);

(This is the quick-hack version, to do it properly you need to get the
"data" of all children and append it.)

Robin
 
B

BootNic

Angel said:
[snip]
Does firefox support the innerText property?
Click to expand...

It supports textContent.

<script language="JavaScript">
TableObject=document.getElementById('RCTable');
var x=TableObject.rows[1].cells[1];
alert(tx=(x.innerText)?x.innerText:x.textContent);
</script>
 
B

BootNic

[snip]
Does firefox support the innerText property?
Click to expand...

It supports textContent.

<script language="JavaScript">
TableObject=document.getElementById('RCTable');
var x=TableObject.rows[1].cells[1];
alert(tx=(x.innerText)?x.innerText:x.textContent);
</script>
Click to expand...

I should have replaced language="JavaScript" with
type="text/javascript"


--
BootNic Friday, March 10, 2006 2:48 PM

"This is all very interesting, and I daresay you already see me
frothing at the mouth in a fit; but no, I am not; I am just winking
happy thoughts into a little tiddle cup."
*Nabokov, Lolita*
 
A

Angel

Thanks a ton for all the help

I have a question more. How do I find the row number of a specific
element in a table

The following HTML sample works perfect in IE. On click of the
checkboxes, I am displaying the row number and its column number. How
do I manage the same in Firefox

<html>
<head>
<script language="javascript">
function selectedRow(object,cNumber)
{
while (object.tagName != 'TR')
{
object = object.parentNode;
}
RowNumber = object.rowIndex;
cellNumber = cNumber;
alert(RowNumber + " : " + cellNumber)
}

</script>
</head>

<body>
<table width="20%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#CCCCCC" id=myTable name=myTable>
<tr id="1">
<td width="28%"><input name="r1c1" type="checkbox" id="r1c1"
onClick="selectedRow(this.parentElement,this.parentNode.cellIndex)">
R1, C1</td>
<td width="32%"><input name="r1c2" type="checkbox" id="r1c2"
onClick="selectedRow(this.parentElement,this.parentNode.cellIndex)">
R1, C2</td>
</tr>
<tr id="1">
<td><input name="r2c1" type="checkbox" id="r2c1"
onClick="selectedRow(this.parentElement,this.parentNode.cellIndex)">
R2, C1</td>
<td><input name="r2c1" type="checkbox" id="r2c1"
onClick="selectedRow(this.parentElement,this.parentNode.cellIndex)">
R2, C1</td>
</tr>
</table>
</body>
</html>
 
M

Martin Honnen

Angel wrote:

onClick="selectedRow(this.parentElement,this.parentNode.cellIndex)">
Click to expand...

Use parentNode only, not parentElement and Mozilla and other browsers
will do as parentNode is defined in the W3C DOM while parentElement is a
left over from IE 4 times.
 

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

Javascript DOM 1
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
Sort by number of characters 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Script to send email not working 1
Help needed with thank you message 5
Only one table shows up with the information 2
Row Numbers in Firefox 1

Members online

Total: 46 (members: 1, guests: 45)
Robots: 351

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,062
Latest member
OrderKetozenseACV

Latest Threads

Top