Aggiungere righe (tr) ad una tabella dinamicamente

[LeaderGL]

Ragazzi ieri ho scritto del codice Javascript per aggiungere delle righe (con più colonne) ad una tabella...il problema è che ho notato che con IE (ho provato IE7) non funziona...

siccome siete sicuramente più esperti di me con Javascript mi aiutate?

Questo è il codice che ho scritto, che ha che non va?

<script type="text/javascript">
	var indice = 1;

	function addInput2() {
		indice = indice + 1;
		// Creo elemento di riga TR
		var row = document.createElement('tr');

		// Creo prima colonna
		var col1 = document.createElement('td');
		col1.setAttribute('valign', 'top');
		// Creo campo input da associare alla prima colonna e gli aggiungo i vari attributi
		var input1 = document.createElement('input');
		input1.setAttribute('type', 'text');
		input1.setAttribute('name', 'articolo[' + indice + ']');
		input1.setAttribute('onChange', 'addInput2()');
		input1.setAttribute('style', 'width: 300px');
		col1.appendChild(input1);

		// Creo seconda colonna
		var col2 = document.createElement('td');
		col2.setAttribute('valign', 'top');
		// Creo campo input da associare alla seconda colonna e gli aggiungo i vari attributi
		var input2 = document.createElement('input');
		input2.setAttribute('type', 'text');
		input2.setAttribute('name', 'quantita[' + indice + ']');
		input2.setAttribute('value', '1');
		col2.appendChild(input2);

		// Creo seconda colonna
		var col3 = document.createElement('td');
		col3.setAttribute('valign', 'top');
		// Creo campo input da associare alla seconda colonna e gli aggiungo i vari attributi
		var input3 = document.createElement('textarea');
		input3.setAttribute('name', 'descrizione[' + indice + ']');
		input3.setAttribute('rows', '1');
		input3.setAttribute('cols', '30');
		col3.appendChild(input3);

		// Aggiungo le colonne alla riga
		row.appendChild(col1);
		row.appendChild(col2);
		row.appendChild(col3);
		// Aggiungo la riga alla tabella
		document.getElementById('contenitore').appendChild(row);
	}
</script>

<table align="center" id="contenitore">
	<tr>
		<td width="300px">Articolo:</td>
		<td>Quantità:</td>
		<td>Descrizione:</td>
	</tr>
	<tr>
		<td valign="top"><input type="text" name="articolo[1]" onChange="addInput2()" style="width: 300px"></td>
		<td valign="top"><input type="text" name="quantita[1]"></td>
		<td valign="top"><textarea name="descrizione[1]" rows="1" cols="30"></textarea></td>
	</tr>
</table>

[cavicchiandrea]

prova a confrontarlo con questo che ti assicuro funziona benissimo.

[Xinod]

infatti,
per migliorare la compatibilita'
- aggiungi il tbody nel markup e appendi le righe ad esso, non a <table>
- setAttribute('valign', 'top'); con ogni probabilita' dovrebbe essere setAttribute('vAlign', 'top');
- questi
setAttribute('onChange', 'addInput2()');
setAttribute('style', 'width: 300px');
non sono attributi, il primo e' un gestore evento, il secondo e' un oggetto a se' stante
input1.onchange=addInput2;
input1.style.width='300px';

ciao

[LeaderGL]

Vi ringrazio...in effetti aggiungendo il <tbody> ho già migliorato le cose con IE.
Inoltre con gli ultimi suggerimenti:

input1.onchange=addInput2;
input1.style.width='300px';

siamo arrivati alla soluzione thanks!