Script works during page load, but not after

[ChronoFish]

Hello,

I have some Javascript that adds rows to a table. This is
encapsulated in a function called "addVariable".

If I call the function while the page is loading, like this:

<script>
addVariable('group', 'new_1', 'empty');
addVariable('group', 'new_2', '');
</script>

The desired results occur. When I call the function via a button press
(onclick), the table row is not added, even though the function is
called (verified with an alert) and with the correct parameters are
being
passed.

The function that adds the row is here:
function addVariable(group, count, value)
{
alert(group+ ', ' + count + "= '" + value + "'");
var newRow = document.createElement('tr');
var rowId = group+'_row_'+count;
newRow.setAttribute('id',rowId);
newRow.innerHTML = '<td>' +
'<input id='+group+'attribute['+count+']
name='+group
+'attribute['+count+'] value=\''+value+'\'>' +
'<input type="button" value="x"
onclick="removeVariable(\''+rowId
+'\');">' +
'</td>';
document.getElementById("insert_"+group).appendChild(newRow);

}

The problem occurs in IE 7.0.5730.11 (only IE version tested).
Of course this works fine in Firefox.

Any suggestions?

Thanks,

CF

 

[RobG]

Hello,

I have some Javascript that adds rows to a table. This is
encapsulated in a function called "addVariable".

If I call the function while the page is loading, like this:

<script>
addVariable('group', 'new_1', 'empty');
addVariable('group', 'new_2', '');
</script>

The desired results occur. When I call the function via a button press
(onclick), the table row is not added, even though the function is
called (verified with an alert) and with the correct parameters are
being
passed.

The function that adds the row is here:
function addVariable(group, count, value)
{
alert(group+ ', ' + count + "= '" + value + "'");
var newRow = document.createElement('tr');

If you have a reference to the table or tbody, you can use insertRow:

var newRow = insertRow(-1);

<URL: http://developer.mozilla.org/en/doc...ples#Example_8:_Using_the_DOM_Table_Interface

var rowId = group+'_row_'+count;
newRow.setAttribute('id',rowId);

Do not use setAttribute, it is broken in places in IE, just set the
property directly:

newRow.id = rowId;

newRow.innerHTML = '<td>' +
'<input id='+group+'attribute['+count+']
name='+group

Do not use innerHTML to modify a table. You can use it to write an
entire table, or the contents of a cell, but not otherwise.


[...]

The problem occurs in IE 7.0.5730.11 (only IE version tested).
Of course this works fine in Firefox.

Of course. innerHTML is a proprietary IE feature that MS
documentation says will not work as you've attempted. RTFM:

<URL: http://msdn2.microsoft.com/en-us/library/ms533897.aspx >

<FAQENTRY>
I think by now this question qualifies for the FAQ, something like:

"Why can't I insert a table row with innerHTML?"

</FAQENTRY>

 

[ChronoFish]

Hello,

I have some Javascript that adds rows to a table. This is
encapsulated in a function called "addVariable".

If I call the function while the page is loading, like this:

<script>
addVariable('group', 'new_1', 'empty');
addVariable('group', 'new_2', '');
</script>

The desired results occur. When I call the function via a button press
(onclick), the table row is not added, even though the function is
called (verified with an alert) and with the correct parameters are
being
passed.

The function that adds the row is here:
function addVariable(group, count, value)
{
alert(group+ ', ' + count + "= '" + value + "'");
var newRow = document.createElement('tr');

If you have a reference to the table or tbody, you can use insertRow:

var newRow = insertRow(-1);

<URL:http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#Exa...

var rowId = group+'_row_'+count;
newRow.setAttribute('id',rowId);

Do not use setAttribute, it is broken in places in IE, just set the
property directly:

newRow.id = rowId;

newRow.innerHTML = '<td>' +
'<input id='+group+'attribute['+count+']
name='+group

Do not use innerHTML to modify a table. You can use it to write an
entire table, or the contents of a cell, but not otherwise.

[...]

The problem occurs in IE 7.0.5730.11 (only IE version tested).
Of course this works fine in Firefox.

Of course. innerHTML is a proprietary IE feature that MS
documentation says will not work as you've attempted. RTFM:

<URL:http://msdn2.microsoft.com/en-us/library/ms533897.aspx>

<FAQENTRY>
I think by now this question qualifies for the FAQ, something like:

"Why can't I insert a table row with innerHTML?"

</FAQENTRY>

This is great - thanks so much