adding rows to a table

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

benkasminbullock@gmail.com - 26 Oct 2007 07:11 GMT

I have a script which adds rows to an HTML table. However, the script
functions only for Firefox and not for Internet Explorer. Here is a
test case which works on Firefox 2.0.0.8 but does not work on Internet
Explorer 6.0.

Can anyone explain why this does not work, and is there a way to make
it work with Internet Explorer?

What bothers me is that modifying the script slightly to change the
table to a <ul> and the <tr> to a <li> does work with Internet
Explorer.

Thanks for any help.

%%%%%%%%%%%%%%% start of example

<html>
<head>
<script>
function add_a_row()
{
alert ("Add a row");
var cell = document.createElement("td");
cell.appendChild(document.createTextNode("Second"));
var row = document.createElement("tr");
row.appendChild(cell);
var mytable = document.getElementById("mytable");
mytable.appendChild(row);
}
</script>
<style>
table { border-style: outset; border-width: 3; }
td { border-style: inset; border-width: 3; font-size: 50; }
</style>
</head>
<body>
<table id="mytable">
<tr><td>First</td></tr>
</table>
<form>
<input type="button"
onclick="add_a_row()"
value="add a row">
</form>
</body>
</html>

%%%%%%%%%%%%%%%%% end of example

Reply to this Message

RobG - 26 Oct 2007 07:33 GMT

On Oct 26, 4:11 pm, "benkasminbull...@gmail.com"
<benkasminbull...@gmail.com> wrote:

> I have a script which adds rows to an HTML table. However, the script
> functions only for Firefox and not for Internet Explorer. Here is a
> test case which works on Firefox 2.0.0.8 but does not work on Internet
> Explorer 6.0.

<FAQENTRY>

Here it is again... :-)

</FAQENTRY>

> Can anyone explain why this does not work, and is there a way to make
> it work with Internet Explorer?

When adding rows to a table:

1. Don't ever user innerHTML (OK, you didn't do that)

2. Don't append rows to the table, append them to a
tableSection element (tbody, thead or tfoot)

3. Consider using insertRow(-1) on the table or tableSection
so the row is created and appended in one statement.

<URL: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Example_8:_Usi
ng_the_DOM_Table_Interface

--
Rob

Reply to this Message

benkasminbullock@gmail.com - 26 Oct 2007 08:07 GMT

> > Can anyone explain why this does not work, and is there a way to make
> > it work with Internet Explorer?
[quoted text clipped - 10 lines]
>
> <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

Thank you very much for your help.

Incidentally it says on the web pages that only IE needs to have the
elements added to tbody, but in fact Firefox was adding some extra
space at the top of the table every time I recreated it which was the
bug which drove me to test it with Internet Explorer in the first
place. Putting the elements onto <tbody> stopped the Firefox problem.

Thanks again.

Reply to this Message

SAM - 27 Oct 2007 18:04 GMT

benkasminbullock@gmail.com a écrit :

>> <URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...
>
> Incidentally it says on the web pages that only IE needs to have the
> elements added to tbody, but in fact Firefox was adding some extra
> space at the top of the table every time I recreated it

With the above example my Firefox add no space ...
(or it is very very very small ?)

Signature

Reply to this Message

benkasminbullock@gmail.com - 31 Oct 2007 08:46 GMT

On Oct 28, 2:04 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> benkasminbull...@gmail.com a ?crit :
>
[quoted text clipped - 6 lines]
> With the above example my Firefox add no space ...
> (or it is very very very small ?)

I'm sorry to have confused you.

This problem is only visible upon deleting the rows and then re-adding
them. My example script doesn't do that, so the problem is not visible
here.

Reply to this Message

RobG - 29 Oct 2007 00:54 GMT

On Oct 26, 5:07 pm, "benkasminbull...@gmail.com"
<benkasminbull...@gmail.com> wrote:

> > > Can anyone explain why this does not work, and is there a way to make
> > > it work with Internet Explorer?
[quoted text clipped - 18 lines]
> bug which drove me to test it with Internet Explorer in the first
> place. Putting the elements onto <tbody> stopped the Firefox problem.

Reply to this Message

RobG - 29 Oct 2007 01:01 GMT

On Oct 26, 5:07 pm, "benkasminbull...@gmail.com"
<benkasminbull...@gmail.com> wrote:

> > > Can anyone explain why this does not work, and is there a way to make
> > > it work with Internet Explorer?
[quoted text clipped - 15 lines]
> Incidentally it says on the web pages that only IE needs to have the
> elements added to tbody,

It doesn't say "only", however IE is the only browser I'm aware of
that requires new rows added using appendChild to be appended to a
tableSection element (e.g. tbody), other browsers I've tested are OK
with appending to the table element. I presume that this behaviour is
because the tbody tags are not required and hence rarely used,
although the tbody element is mandatory. Browsers insert a tbody
where required even if there are no tags - similarly some DOMs allow
appending rows to the table and assume that they should be appended to
a tbody.

Both behaviours are OK, they are just different.

> but in fact Firefox was adding some extra
> space at the top of the table every time I recreated it which was the
> bug which drove me to test it with Internet Explorer in the first
> place. Putting the elements onto <tbody> stopped the Firefox problem.

I can't comment about the whitespace, nothing you've posted indicates
that it should occur.

--
Rob

Reply to this Message

benkasminbullock@gmail.com - 31 Oct 2007 08:45 GMT

> On Oct 26, 5:07 pm, "benkasminbull...@gmail.com"
>
[quoted text clipped - 39 lines]
> I can't comment about the whitespace, nothing you've posted indicates
> that it should occur.

The tables in the original application (not the example I posted) have
about eighty entries, and each time the table entries were deleted and
recreated using the original script, which goes like this:

function clear(obj)
{
while(obj.hasChildNodes()) {
obj.removeChild(obj.lastChild);
}
}

<some lines>

clear(document.getElementById("resultsField"));

about two or three centimetres of screen space was added to the top of
the table. If you're really interested in this issue I'll try to make
a script which replicates it. As I mentioned, you also need to delete
all the rows and put them back, which is a function I didn't add to
the example script. But the problem disappeared when I added the
things to tbody, so it's academic as far as I'm concerned. Thanks for
your help.

Reply to this Message

SAM - 27 Oct 2007 18:01 GMT

RobG a écrit :

> <URL: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Example_8:_Usi
ng_the_DOM_Table_Interface

My english is too poor and I didn't understand if this example is
correctly interpreted by IE Windows, is it or not ?
(I haven't Windows to test it)

Signature

Reply to this Message

RobG - 29 Oct 2007 00:51 GMT

On Oct 28, 3:01 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

> RobG a ?crit :
>
[quoted text clipped - 3 lines]
> correctly interpreted by IE Windows, is it or not ?
> (I haven't Windows to test it)

It is OK in IE. :-)

--
Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2007

adding rows to a table