Inserimento nuova riga in tabella che non funziona

[SuperGulp1970]

Ciao a tutti,
la necessità che ho è quella di inserire in una tabella una nuova riga sempre in penultima posizione. Per facilitare le cose nella tabella (che viene generata in php) gli oggetti dell'ultima linea vengono chiamati con un'asterisco, mentre gli altri numerati prograssivamente.

<table id='Tabella'>
<th class='piccolo'>Progressivo</th>
<th class='piccolo'>Valore 1</th><th class='piccolo'>Valore 2</th> <tr>  <td id='LineaNumerca__0'>0 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__0'></td><td id='ValoreUNO__0'>0</td><td id='ValoreDUE__0'>66</td><tr> <td id='LineaNumerca__1'>1 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__1'></td><td id='ValoreUNO__1'>66.5</td><td id='ValoreDUE__1'>71</td><tr> <td id='LineaNumerca__2'>2 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__2'></td><td id='ValoreUNO__2'>71.5</td><td id='ValoreDUE__2'>77</td><tr> <td id='LineaNumerca__3'>3 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__3'></td><td id='ValoreUNO__3'>77.5</td><td id='ValoreDUE__3'>83</td><tr> <td id='LineaNumerca__4'>4 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__4'></td><td id='ValoreUNO__4'>83.5</td><td id='ValoreDUE__4'>89</td><tr>  <td id='LineaNumerca__5'>5 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__5'></td><td id='ValoreUNO__5'>89.5</td><td id='ValoreDUE__5'>95</td><tr> <td id='LineaNumerca__6'>6 <input type='button' value='Modifica' class='piccolo' id='TastoModifica__6'></td><td id='ValoreUNO__6'>95.5</td><td id='ValoreDUE__6'>101</td><tr> <td id='LineaNumerca__*'>* <input type='button' value='Modifica' class='piccolo' id='TastoModifica__*'></td><td id='ValoreUNO__*'>0</td><td id='ValoreDUE__*'>6</td><tr> <td colspan='3' align='center'><input type='button' class='piccolo' value='Rimuovi ultima riga' id='Rimuovi_UltimaLinea'></td><tr><td class='piccolo'><input class='piccolo' type='button' value='Aggiungi' onclick='Aggiungi()'; id='AggiungiLinea'></td><td rowspan='2' class='piccolo'>Da <input class='piccolo' type='text' name='InputValoreUNO' size='1' id='InputValoreUNO'></td><td class='piccolo' rowspan='2'>A <input class='piccolo' type='text' name='InputValoreDUE' size='1' id='InputValoreDUE'></td><tr> <td><input type='button' value='Salva modifica' disabled class='piccolo' id='Salva'></td>  </table>

Quando viene eseguita la funzione in js ho il seguente errore

Messaggio: Argomento non valido. Linea: 46 Carattere: 3

con IE e

Errore: uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: "file:///C:/Documents%20and%20Settings/alessandro/Desktop/TableAppo.htm Line: 46"]

con FireFox. L'errore è sulla linea Padre.insertBefore(row,Prossimo);

Qui posto il codice js

<script>  function Aggiungi()   {     N=0;   while (N!=-1)    {     Verifica="ValoreUNO__"+N; //	alert (N+") " + Verifica + " " + document.getElementById(Verifica)); 	if (document.getElementById(Verifica)!=null) 	 N++; 	else 	 { 	  U=N; 	  N=-1; 	 }    }   Prossimo=document.getElementById("ValoreUNO__*");   Padre=document.getElementById('Tabella');   var row = document.createElement("tr");    var cell = document.createElement("td");   K=U+" ";   var cellText = document.createTextNode(K);   cell.appendChild(cellText);   var IModifica=document.createElement("input");    IModifica.type="button";   IModifica.value="Modifica";   IModifica.className="piccolo";   IModifica.setAttribute("id","TastoModifica__"+U);   cell.appendChild(IModifica);      row.appendChild(cell);     var cell = document.createElement("td");   IdDa="ValoreUNO__"+U;     cell.setAttribute("id",IdDa);   var cellText = document.createTextNode(document.getElementById('InputValoreUNO').value);   cell.appendChild(cellText);   document.getElementById('InputValoreUNO').value="";     row.appendChild(cell);      var cell = document.createElement("td");   IdA="ValoreDUE__"+U;   cell.setAttribute("id",IdA);   var cellText = document.createTextNode(document.getElementById('InputValoreDUE').value);   cell.appendChild(cellText);   document.getElementById('InputValoreDUE').value="";   row.appendChild(cell);   // Padre.appendChild(row);    Padre.insertBefore(row,Prossimo);   } </script>

Se utillizzo l'appendchild funziona tutto correttamente.

Ho smanettato parecchio, cercato informazioni, ma mi sembra che il codice si scritto bene (ma sicuramente, ed evidentemente, mi sfugge qualche cosa) !!!!

Avete idee ?? Grazie

[lucavizzi]

Il codice, così come lo hai postato (su un unico rigo), è poco leggibile.....

Potresti provare a separare la tabella,

  <tr>
    <td id='LineaNumerca__6'>6
      <input type='button' value='Modifica' class='piccolo' id='TastoModifica__6'></td>
    <td id='ValoreUNO__6'>95.5</td>
    <td id='ValoreDUE__6'>101</td>
  </tr>
</table>

<table>
  <tr>
    <td id='LineaNumerca__*'>*
      <input type='button' value='Modifica' class='piccolo' id='TastoModifica__*'></td>
    <td id='ValoreUNO__*'>0</td>
    <td id='ValoreDUE__*'>6</td>

ed usare appendchild

[Xinod]

vedi se raccogliendo le righe in un tbody cambia qualcosa

in generale, quando si manipola una tabella via DOM e' buona pratica specificare sempre il tbody nel markup, perche' il DOM non e' il markup, ma come il browser vede il markup

se non c'e' un tbody alcuni browser lo considerano ugualmente come fosse presente nell' alberatura, altri no
se invece c'e' nel markup lo considerano tutti

[SuperGulp1970]

Chiedo scusa per il codice su una linea sola.

questo mi sembra un ottimo workaround


Grazie