Newsgroup: it.comp.lang.javascript
Titolo: Generazione dinamica di righe cella con campi form

Ciao ho questo "desiderio", dovrei generare delle righe dinamicamente a
piacere dell'utente.
Ex.: Campo sosanza e quantità. In ingresso la pagina viene popolata da 5
righe, ma se l'utente ha necessità e ne vuole di più cliccando dovrebbe
crearsi una nuova riga con i nuovi campi in sequenza.
Ho visto un esempio simile su Jumbo mail di Libero, caricando + files in
simultanea...ho provato a guardare nel codice ma non si capisce niente...
mi date una mano?
BYE!
-------------
<html>
<head>
</head>
<body>
<form name="form1" method="post" action="">
  <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>Sostanza
          <input name="Sostanza" type="text">
      Qt.
      <input name="qt" type="text" size="6">
      <br>
      <a href="#">Fai click qui se devi inserirne altre (si dovrebbe creare
una nuova riga <tr><td></td><tr> sopra a questa scritta, non c'è un numero
limite, quindi non si deve usare le proprietà visibile none, etc....</a>
   </td>
    </tr>
  </table>
</form>
</body>
</html>

 crearsi una nuova riga con i nuovi campi in sequenza.
Non è così semplice, colpa anche di IE che non gestisce molto bene queste
cose.
Comincia a studiarti un po' createElement, in rete troverai molti esempi.
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

 In data Thu, 04 Nov 2004 20:32:52 GMT, Alen Cappelletti ha scritto:
Ciao Cristiano,
ho fatto qualche cosa vedi il codice, ma sinceramente non ho trovato molto
in giro sull'argomento.
Diciamo che va quasi bene, vorrei però introdurre un (-) che se cliccato
cancelli la riga rispettiva.
Ora le righe si creano dinamicamente, ma sono sono riuscito ad:
1) aggiungere il segno (-)...non ho molto capito come funziona quel
appendChild
2) Cancellarne una specifica...enso di agire sul getElementById.
Bye a domani...
-----------
<html>
<head>
<link rel="stylesheet" href="../../Css/style.css" type="text/css">
  <script language='javascript'>
 function SoloNumeri(numero,ObjName){
  if(isNaN(numero)){
   alert('Introduci solo numeri!');
   document.getElementById(ObjName).value='';
  }
 }
    function addRow(a,b) {
      var r  = document.createElement("<tr class='TXTbaseLineaSotto'>");
      var ca = document.createElement("<td class='TXTbaseLineaSotto'>");
   var input = document.createElement("<input name='Sostanza' type='text'
class='TXTBaseGray' id='Sostanza' value='<Scrivi sostanza>'  style='width:
150px;' onFocus=this.value='';this.className='TXTbase'>");
   var input2 = document.createElement("<input name='ValoreSostanza'
type='text' class='TXTBaseGray' id='ValoriSostanza' style='width: 54px;
text-align:right' size='6' maxlength='5'
onKeyUp='SoloNumeri(this.value,
this.name
);' value='<Valore>'
onFocus=this.value='';this.className='TXTbase'>");
     // var Elimina = document.createElement("<a href='#' alt='Elimina
riga'>(-)</a>")
   var cb = document.createElement('<td>');
      var ta = document.createTextNode(a);
      var tb = document.createTextNode(b);
      var t  = document.getElementById('ValoriNutrizionali');
      ca.appendChild(input);
      cb.appendChild(input2);
      r.appendChild(ca);
      r.appendChild(cb);
      t.tBodies(0).appendChild(r);
    }
  </script>
</head>
<body>
   <table width="100%"  border="0" cellpadding="0" cellspacing="0"
id="ValoriNutrizionali">
     <tr>
       <td width="160" class="TXTbaseLineaSotto">Valori medi di
riferimento</td>
       <td><input name="ValoriMediRiferimento" type="text"  class="FormBase"
id="ValoriMediRiferimento5" style="width: 54px; text-align:right" size="6"
maxlength="5" onKeyUp="SoloNumeri(this.value,
this.name
);"></td>
     </tr>
     <tr>
       <td class="TXTbaseLineaSotto">Porzione di riferimento</td>
       <td><input name="PorzioneRiferimento" type="text"  class="FormBase"
id="PorzioneRiferimento" style="width: 54px; text-align:right" size="6"
maxlength="5" onKeyUp="SoloNumeri(this.value,
this.name
);"></td>
     </tr>
     <tr>
       <td class="TXTbaseLineaSotto">Calorie</td>
       <td class="TXTbase"><input name="Calorie" type="text"
class="FormBase" id="Calorie2" style="width: 54px; text-align:right"
size="6" maxlength="5" onKeyUp="SoloNumeri(this.value,
this.name
);">
      Kcal </td>
     </tr>
     <tr>
       <td class="TXTbaseLineaSotto">Proteine</td>
       <td><input name="Proteine" type="text"  class="FormBase"
id="Proteine3" style="width: 54px; text-align:right" size="6" maxlength="5"
onKeyUp="SoloNumeri(this.value,
this.name
);"></td>
     </tr>
     <tr>
       <td class="TXTbaseLineaSotto">Carboidrati</td>
       <td><input name="Carboidrati" type="text"  class="FormBase"
id="Carboidrati" style="width: 54px; text-align:right" size="6"
maxlength="5" onKeyUp="SoloNumeri(this.value,
this.name
);"></td>
     </tr>
     <tr>
       <td class="TXTbaseLineaSotto">Grassi</td>
       <td><input name="Grassi" type="text"  class="TXFormBase" id="Grassi"
style="width: 54px; text-align:right" size="6" maxlength="5"
onKeyUp="SoloNumeri(this.value,
this.name
);"></td>
     </tr>
   </table>
   <table width="100%"  border="0" cellpadding="0" cellspacing="0">
     <tr>
       <td colspan="2" class="TXTbaseLineaSotto"><a
href="javascript:addRow('aa','bb');" class="UnderGreen">Altro valore
supplementare nutrizionale?</a></td>
     </tr>
     <tr>
       <td width="160" class="TXTbase">Note</td>
       <td><textarea name="ValoriNutrizionaliNote" cols="40" rows="5"
class="FormBase" id="textarea" style="width:200px"></textarea></td>
     </tr>
   </table>
</body>
</html>

 cancelli la riga rispettiva.
Non ti basta onclick settare il display:none alla tr?
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M.

 news:r0xwof4w...@ID-147253.user.individual.net...
Il mio problema è che non riesco a far scrivere del testo (sarebbe il
link per l'eliminazione della riga) a lato del valore??
Come si fa? Sarebbe  'var Elimina'
----------
	function SoloNumeri(numero,ObjName){
		if(isNaN(numero)){
			alert('Introduci solo numeri!');
			document.getElementById(ObjName).value='';
		}
	}
    function addRow() {
      var tr  = document.createElement("<tr
class='TXTbaseLineaSotto'>");
      var td1 = document.createElement("<td
class='TXTbaseLineaSotto'>");
	  var td2 = document.createElement("<td class='TXTbaseLineaSotto'>");
	  var input1 = document.createElement("<input name='Sostanza'
type='text' class='TXTBaseGray' id='Sostanza' value='<Scrivi
sostanza>'  style='width: 150px;'
onFocus=this.value='';this.className='TXTbase'>");
	  var input2 = document.createElement("<input name='ValoreSostanza'
type='text' class='TXTBaseGray' id='ValoriSostanza' style='width:
54px; text-align:right' size='6' maxlength='5'
onKeyUp='SoloNumeri(this.value,
this.name
);' value='<Valore>'
onFocus=this.value='';this.className='TXTbase'>");
      var Elimina = document.createTextNode("<a href='#' alt='Elimina
riga'>(-)</a>")
      var tbl  = document.getElementById('ValoriNutrizionali');
 
 
      td1.appendChild(input1);
      td2.appendChild(input2);
	  appendChild(Elimina);
 
      tr.appendChild(td1);
      tr.appendChild(td2);
      tbl.tBodies(0).appendChild(tr);
    }

 Non ti basta onclick settare il display:none alla tr?
Fatto ma sembra ignorare ID che gli attribuisco???
BYE
----------
<html>
<head>
<link rel="stylesheet" href="../../Css/style.css" type="text/css">
  <script language='javascript'>
	function SoloNumeri(numero,ObjName){
		if(isNaN(numero)){
			alert('Introduci solo numeri!');
			document.getElementById(ObjName).value='';
		}
	}
 
	function Hide(i){
		document.getElementById('Valore'+i).style.display='none';
	}
 
	var ContaRighe = 0;
    function addRow(i) {
	//alert(ContaRighe);
	  ContaRighe = ContaRighe+1
      var tr  = document.createElement("<tr
class='TXTbaseLineaSotto'>");
 
tr.id
 = 'Valore'+ContaRighe
      var td1 = document.createElement("<td
class='TXTbaseLineaSotto'>");
	  var td2 = document.createElement("<td class='TXTbaseLineaSotto'>");
	  var td3 = document.createElement("<td class='TXTbaseLineaSotto'>");
	  var input1 = document.createElement("<input name='Sostanza'
type='text' class='TXTBaseGray' id='Sostanza' value='<Scrivi
sostanza>'  style='width: 150px;'
onFocus=this.value='';this.className='TXTbase'>");
	  var input2 = document.createElement("<input name='ValoreSostanza'
type='text' class='TXTBaseGray' id='ValoriSostanza' style='width:
54px; text-align:right' size='6' maxlength='5'
onKeyUp='SoloNumeri(this.value,
this.name
);' value='<Valore>'
onFocus=this.value='';this.className='TXTbase'>");
	  var S = document.createElement("<span class='TXTspecificheBlu'>") 
	  var A = document.createElement("<a href='javascript:hide(
this.id
);'
class='UnderRed'>");
	  	  A.id = ContaRighe
		  S.appendChild(A);
      var TextA = document.createTextNode("[-] Elimina")
	      A.appendChild(TextA);
	  //var CloseA = document.createElement("</a>")
      var tbl  = document.getElementById('ValoriNutrizionali');
 
      td1.appendChild(input1);
	  // td1.appendChild(OpenA);
      //td1.appendChild(input1);
      td2.appendChild(input2);
	  td3.appendChild(A);
	  //appendChild(Elimina);
 
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tbl.tBodies(0).appendChild(tr);
    }
  </script>

       <td colspan="2" class="TXTbaseLineaSotto"><a href="#"
onclick="addRow();" class="UnderGreen">Altro valore supplementare
nutrizionale?</a><br>
         <a href="#" onClick="alert(ContaRighe);">alert</a><br>
         <a href="#"
onClick="document.getElementById('Maradona').style.display='none';">EliminaRiga</a><br>


 class='UnderRed'>");
Qua stai passando alla function Hide() (da notare il maiuscolo, come la hai
scritta te non funzionerà, ricorda che js è case-sensitive) come id l'id
dell'anchor => ti dovrebbe quindi nascondere l'ancor...solo che l'anchor
non ha id, quindi riceverà un undefined, immagino...
Devi passargli l'id della tr da cancellare, non l'id (inesistente peraltro)
dell'anchor.
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

function Hide(i){
Ok l'avevo scritto sbagtliato ma non era quello
-----
var A = document.createElement("<a class='UnderRed'>");
		  A.id = ContaRighe;
		  A.href = 'javascript:Hide(
this.id
);'
		  S.appendChild(A);
ContaRighe č una variabile esterna alla funzione....quando la funzione
viene richiamata fa un +1, quindi prima setti ID, poi richiamo la
funzione...
function Hide(i){
 alert(i);
 document.getElementById('Valore'+i).style.display='none';
}
La riga che devo nascondere č 'Valore+Num', quindi penso che sia
corretto il passaggio...ma alert mi riporta sempre "undefined",
non capisco il perchč??????????

 funzione...
Magari è qua il problema? (id *NON* può cominciare con un numero).
Prova a settare per esempio id="V"+ContaRighe; (puoi modificare con
Hide(this.id.substr(1)) per passare comunque il contatore corretto).
Prova un po'.
Se non va prova onclick a mettere un alert(
this.id
) (togli l'Hide()), cosa
restituisce?


 ha scritto nel messaggio
news:g3pazl7h...@ID-147253.user.individual.net...


 alert(this.id.substr(1)) non va errore....
 alert(
this.id
) non va errore....
 Hide(this.id.substr(1)) non va errore....
 A.href = 'javascript:alert(ContaRighe);' mi da il numero giusto però
------- Codice Completo, se hai voglia dai un'occhiata ---------
nella funzione function addRow(i){
mi dice sempre errore undefined alle righe 43/44
    A.id = 'V'+ContaRighe;
    A.href = 'javascript:alert(
this.id
);'
-----------------------------------------------------------------
<html>
<head>
<link rel="stylesheet" href="../../Css/style.css" type="text/css">
  <script language='javascript'>
 function SoloNumeri(numero,ObjName){
  if(isNaN(numero)){
   alert('Introduci solo numeri!');
   document.getElementById(ObjName).value='';
  }
 }
 function Hide(){
  alert(i);
  //document.getElementById('Valore'+i).style.display='none';
 }
var ContaRighe = 0;
function addRow(i){
var error = 0;
 ContaRighe = ContaRighe+1
 if(ContaRighe>1){
  var obj = document.getElementById;
  //alert(obj('Sostanza'+(ContaRighe-1)).value);
if(obj('Sostanza'+(ContaRighe-1)).value==''||obj('Sostanza'+(ContaRighe-1)).
value=='<Scrivi
sostanza>'||obj('ValoriSostanza'+(ContaRighe-1)).value==''||obj('ValoriSosta
nza'+(ContaRighe-1)).value=='<Valore>'){
   alert('Compilate i due campi precedenti prima di fare un nuovo
inserimento');
   ContaRighe = ContaRighe-1;
   error = 1;
  }
 }
 if(error==0){
  var tr  = document.createElement("<tr class='TXTbaseLineaSotto'>");
 
tr.id
 = 'Valore'+ContaRighe
  var td1 = document.createElement("<td class='TXTbaseLineaSotto'>");
  var td2 = document.createElement("<td class='TXTbaseLineaSotto'>");
  var td3 = document.createElement("<td class='TXTbaseLineaSotto'>");
  var input1 = document.createElement("<input name='Sostanza' type='text'
class='TXTBaseGray' value='<Scrivi sostanza>'  style='width: 150px;'
onFocus=this.value='';this.className='TXTbase'>");
 
input1.id
 = 'Sostanza'+ContaRighe
  var input2 = document.createElement("<input name='ValoreSostanza'
type='text' class='TXTBaseGray' style='width: 54px; text-align:right'
size='6' maxlength='5' onKeyUp='SoloNumeri(this.value,
this.name
);'
value='<Valore>' onFocus=this.value='';this.className='TXTbase'>");
 
input2.id
 = 'ValoriSostanza'+ContaRighe
  var S = document.createElement("<span class='TXTspecificheBlu'>")
  var A = document.createElement("<a class='UnderRed'>");
    A.id = 'V'+ContaRighe;
    A.href = 'javascript:alert(
this.id
);'
    S.appendChild(A);
  var TextA = document.createTextNode("[-] Elimina")
    A.appendChild(TextA);
  var tbl  = document.getElementById('ValoriNutrizionali');
  td1.appendChild(input1);
  td2.appendChild(input2);
  td3.appendChild(A);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tbl.tBodies(0).appendChild(tr);
 }
}
</script>

       <td colspan="2" class="TXTbaseLineaSotto"><a href="#"
onclick="addRow();" class="UnderGreen">Altro valore supplementare
nutrizionale?</a><br>
         <a href="#" onClick="alert(ContaRighe);">alert</a></td>


 ------- Codice Completo, se hai voglia dai un'occhiata ---------
[CUT]
Provato a creare direttamente il tutto con createElement? Con IE va, non so
con altri browser.
  A=document.createElement("<a class='UnderRed' id='V"+ContaRighe+"'
onclick='alert(
this.id
)' href='#'>");
Cosě l'alert(
this.id
) č corretto (non sono andato piů avanti a testare).


 In data Mon, 08 Nov 2004 22:35:13 GMT, Alen Cappelletti ha scritto:
FUNZIONA!!!!!!!
L'erore era negli apici...tu hai usato le virgolette...
id='V"+ContaRighe+"' TU (ok)
id='V'+ContaRighe IO (No ok)
TNKS!!!!!!!