adding rows to a table

B

benkasminbullock

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
 
R

RobG

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

<FAQENTRY>

Here it is again... :)

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

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/doc...ples#Example_8:_Using_the_DOM_Table_Interface
 
B

benkasminbullock

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

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

SAM

(e-mail address removed) a écrit :
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
Click to expand...

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

RobG

RobG a écrit :




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

It is OK in IE. :)
 
R

RobG

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

RobG

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

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

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

benkasminbullock

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.


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

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

benkasminbullock

(e-mail address removed) a écrit :


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

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.
 

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

Filter table rows based on multiple checkboxes value 2
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
Image shifts to the right when export the page to pdf 4
How to add dropdown selected data to table using jquery 2
Only one table shows up with the information 2
How to wrap <td> content . 16
Having trouble centering contents of td ? 3
How can I create a table using the input element? 1

Members online

No members online now.
Total: 85 (members: 0, guests: 85)
Robots: 410

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,817
Latest member
DicWeils

Latest Threads

Top