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

S

Stefan Mueller

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>
 
R

Richard Cornford

Stefan said:
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).
Click to expand...

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?
Click to expand...

Almost certanly.
Is this a known problem?
Probably.

How can I fix this problem?
Click to expand...
<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.
 
S

Stefan Mueller

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.
Click to expand...

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.
Click to expand...

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
 
S

Stefan Mueller

First identify the cause of problem. Try alerting the length of the rows
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)
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

Jasen said:
First, fix your html. <tr>s should be children of a <tbody> (etc)
Click to expand...

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
 
V

VK

Stefan said:
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?
Click to expand...


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.
 
R

rjcarr

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

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!
 
V

VK

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

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).
Click to expand...

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

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
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Why is this WordPress comments form not submitting? 1
What is the error in this code , file not fetch and not fetched in the basemap, not vissible in the browser 1
Only one table shows up with the information 2
Filter table rows based on multiple checkboxes value 2
dynamic row table option problem 2
dynamically adding a row to a table (portability issue) 7

Members online

Total: 25 (members: 1, guests: 24)
Robots: 394

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top