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

Why is Safari not inserting a new row/field in the same order like IE, Mozilla and Opera

P: n/a
I'm really very confused. With the following code I can add rows/fields in
frame 1 and 2. If I use IE, Mozilla or Opera the new rows/fields get added
in ascending order. However, if I use Safari the inserted rows/fields in
frame 2 are in descending order (frame 1 is in ascending order).

Is this a bug?
Is this a known problem?
How can I fix this problem?

Stefan
++++++++++++++++++++++++++++++++++++++++++

index.html
==========
<html>
<frameset rows = "*, 20%" frameborder = "0" framespacing = "0">
<frame src="frame1.html" name="frame1" scrolling="auto" noresize>
<frame src="frame2.html" name="frame2" scrolling="no" noresize>
</frameset>
</html>

++++++++++++++++++++++++++++++++++++++++++

frame1.html
===========
<html>
<head>
<script type = "text/javascript">
function newrows(formobjekt) {
tab = document.getElementById("tab1");
row = tab.insertRow(tab.rows.length - 1);

cell = row.insertCell(0);
cell.style.width = "100%";
cell.colSpan = "1";
cell.innerHTML = tab.rows.length;

tab = parent.frame2.document.getElementById("tab2");
row = tab.insertRow(tab.rows.length);

cell = row.insertCell(0);
element = parent.frame2.document.createElement("input");
element.type = "text";
element.value = tab.rows.length;
cell.appendChild(element);
}
</script>
</head>

<body>
<form name = "form1" action = "" method = "post" accept-charset =
"iso-8859-1">
<input type = "button" name = "button1" value = "newrows" onClick =
"newrows(document.form1)">

<table id = "tab1" width = "100%" border = "0">
<tr>
<td width = "100%" colspan = "1">
New rows should be added below
</td>
</tr>

<tr>
<td width = "100%" colspan = "1">
New rows should be added before
</td>
</tr>
</table>
</form>
</body>
</html>

++++++++++++++++++++++++++++++++++++++++++

frame2.html
===========
<html>
<body>
<form name = "form2" target = "frame2" action = "" method = "post"
accept-charset = "iso-8859-1">
<table id = "tab2" width = "100%" border = "0">
<tr>
<td>
<input type = "text" name = "field2" style = "width:300px"
value = "New fields should be added below">
</td>
</tr>
</table>
</form>
</body>
</html>
Nov 26 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Stefan Mueller wrote:
I'm really very confused. With the following code I can
add rows/fields in frame 1 and 2. If I use IE, Mozilla
or Opera the new rows/fields get added in ascending order.
However, if I use Safari the inserted rows/fields in frame
2 are in descending order (frame 1 is in ascending order).
The most probably explanation is that Safari is not updating the length
of the table's - rows - collection as you add rows to the table.
Is this a bug?
Almost certanly.
Is this a known problem?
Probably.
How can I fix this problem?

<snip>

First identify the cause of problem. Try alerting the length of the rows
collection before and after adding rows to see if it changes. Then see
if collections such as the TBODY's childNodes collection change length,
as that might do as an alternative to rows. Otherwise you can keep track
of the number of rows added yourself (i.e. record the start length prior
to the first addition and increment that value as you add rows (assuming
I am right about the cause)).

Richard.
Nov 26 '05 #2

P: n/a
> The most probably explanation is that Safari is not updating the length
of the table's - rows - collection as you add rows to the table.
According to the output (displayed value in the inserted row/field) the
length of the table gets updated.

First identify the cause of problem. Try alerting the length of the rows
collection before and after adding rows to see if it changes.


You're right. But my problem is, that I don't have Safari.
I'm just surprised why it's working in frame 1 different than in frame 2
(only with Safari)

Stefan
Nov 26 '05 #3

P: n/a
On 2005-11-26, Stefan Mueller <se**************@yahoo.com> wrote:
I'm really very confused. With the following code I can add rows/fields in
frame 1 and 2. If I use IE, Mozilla or Opera the new rows/fields get added
in ascending order. However, if I use Safari the inserted rows/fields in
frame 2 are in descending order (frame 1 is in ascending order).
First, fix your html. <tr>s should be children of a <tbody> (etc)
Is this a bug?
I'm not sure.
Is this a known problem?
yes.
How can I fix this problem?


don't use insertRow. use appendChild on the <tbody>

--

Bye.
Jasen
Nov 27 '05 #4

P: n/a
>> First identify the cause of problem. Try alerting the length of the rows
collection before and after adding rows to see if it changes.


You're right. But my problem is, that I don't have Safari.
I'm just surprised why it's working in frame 1 different than in frame 2
(only with Safari)


Last night I've done quite a lot of testing with my Mac (Safari) colleague.
And we figured out, that the following command in Safari is working wrong
row = tab.insertRow(tab.rows.length);

It's not adding the new row after the last row it's adding the new row
before the first row.

Solutino/workaround:
With HTML define a hidden row and add the new row before the last row
(hidden):
row = tab.insertRow(tab.rows.length - 1);

The command above adds a new row before the last row and this works also
with Safari.

Stefan
Nov 27 '05 #5

P: n/a
Jasen Betts wrote:
On 2005-11-26, Stefan Mueller <se**************@yahoo.com> wrote:
I'm really very confused. With the following code I can add rows/fields
in frame 1 and 2. If I use IE, Mozilla or Opera the new rows/fields get
added in ascending order. However, if I use Safari the inserted
rows/fields in frame 2 are in descending order (frame 1 is in ascending
order).


First, fix your html. <tr>s should be children of a <tbody> (etc)


No, they /can/ be. There is nothing to be fixed in the markup as there is
no requirement:

<URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE>

The (known) issue perhaps is that even if the respective elements are not
included in the source code, HTMLTableSectionElement objects are required
in the DOM tree before HTMLTableRowElement objects can be included as their
children.
PointedEars
Nov 27 '05 #6

P: n/a
VK

Stefan Mueller wrote:
I'm really very confused. With the following code I can add rows/fields in
frame 1 and 2. If I use IE, Mozilla or Opera the new rows/fields get added
in ascending order. However, if I use Safari the inserted rows/fields in
frame 2 are in descending order (frame 1 is in ascending order).

Is this a bug?
Is this a known problem?
How can I fix this problem?

1. First of all you should define <tbody> section in your table (or
best of all - all three <thead>, <tfoot> and <tbody>).
These tags are not necessary for HTML layout but they are required if
you plan to script your table later. Most browsers will create <tbody>
automatically but "some browser" (I just love this term :-) will not.

2. addRow() method takes one argument: the position in the rows array
where you want to add new row. Microsoft who invented this method has
this argument set default to -1 which is the common shortcut for
(array.length-1) - the last array element.

So oTable.oBody.insertRow() really means oTable.oBody.insertRow(-1) and
new row goes to the bottom.

Mozilla got it wrong and set default to 0 so oTable.oBody.insertRow()
would be oTable.oBody.insertRow(0) and new row goes to the top. I
guess they realized their oops rather quickly so despite the method
description on mozilla.org still states that default is 0 but it seems
to act is the default is -1.

I guess Safari stays the biggest retard on the market as usual: it got
it wrong and it does it wrong.

Try first if Safary understands the [last element] shortcut:
oTable.oBody.insertRow(-1)

If not then you have to keep doing what you're already doing.

Nov 27 '05 #7

P: n/a
> Try first if Safary understands the [last element] shortcut:
oTable.oBody.insertRow(-1)


I had very similar problems, and yes, using -1 instead of
table.rows.length seems to fix the problem, and also works in firefox
(haven't tested in IE, but I assume it works there too).

As a bonus, I had similar problems to Safari in opera, and using the -1
seemed to fix the problem there too. Great advice, much appreciated!

Dec 15 '05 #8

P: n/a
VK

rj****@gmail.com wrote:
Try first if Safary understands the [last element] shortcut:
oTable.oBody.insertRow(-1)


I had very similar problems, and yes, using -1 instead of
table.rows.length seems to fix the problem, and also works in firefox
(haven't tested in IE, but I assume it works there too).


Of course it does work - this is IE original method and syntax.

Dec 18 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.