Newsgroup: it.comp.lang.javascript
Titolo: Creazione riga <TR> dinamicamente

Ciao sto cercando di creare una riga dinamicamente ma ho qualche
problema...non mi da nessun errore però non me la fa vedere.
Date un'occhiata al codice e mi fate sapere?
Ciao Alen
----------------------------
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
var ContaRighe = 0;
function AddRowBudget(){
var error = 0;
	if(error==0){
		var tr  = document.createElement("<tr'>");
 
tr.id
 = 'TRcreataDinamicamente'+ContaRighe
		var td1 = document.createElement("<td>"); //la prima dove ci sono le
scritte
		var td2 = document.createElement("<td>"); //la seconda campovendor
		var td3 = document.createElement("<td>"); //la terza spazio 10 px
		var td4 = document.createElement("<td>"); //la quarta campo € valore
		var td5 = document.createElement("<td>"); //la quinta dove si scrive
[-] elimina
 
		//I campi di input
		var input1 = document.createElement("<input name='BugetVendorNome'
type='text' style='width: 150px;'>");
 
input1.id
 = 'Vendor'+ContaRighe
		var input2 = document.createElement("<input name='BugetVendorImporto'
type='text' style='width: 54px; text-align:right' size='6' maxlength='5'
onKeyUp='SoloNumeri(this.value,
this.name
);'>");
 
input2.id
 = 'Valore'+ContaRighe
 
		//Link per eliminare la riga
		var S = document.createElement("<span class='TXTverdanaBlu'>") 
		var A = document.createElement("<a class='UnderRed'
id='V"+ContaRighe+"' onClick='Hide(this.id.substr(1),12);return false;'
href='#'>");
		  	S.appendChild(A);
		var TextA = document.createTextNode("[-] Elimina")
		  	A.appendChild(TextA);
		var tbl  = document.getElementById('TBLbudget');
 
		//Assegno alle celle i contenuti
		td2.appendChild(input1);
		td4.appendChild(input2);
		td5.appendChild(A);
 
		//Assegnoi alla riga le celle
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
 
		//Assegno alla tabella la riga
		tbl.tBodies(0).appendChild(tr);
	}
}
</script>
</head>
<body>
<table  border="0" cellpadding="0" cellspacing="0" id="TBLbudget">
  <tr>
    <td width="90" class="TXTarialBluPad">&nbsp;</td>
    <td>&nbsp;</td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
  </tr>
  <tr>
    <td class="TXTarialBluPad">Scc budget</td>
    <td>&nbsp;</td>
    <td class="TXTarialBluNoPad"><input name="SccBudget2" type="text"
class="TXTarialBluNoPad" id="SccBudget2"></td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
  </tr>
  <tr>
    <td class="TXTarialBluPad">Vendors</td>
    <td>&nbsp;</td>
    <td class="TXTarialBluNoPad">
      <input name="BugetVendorNome" type="text" class="TXTarialBluNoPad"
id="BugetVendorNome0"></td>
    <td class="TXTarialBluNoPad">&euro;
        <input name="BugetVendorImporto" type="text"
class="TXTarialBluNoPad" id="BugetVendorImporto0" style="width: 50px;
text-align:right"></td>
    <td class="TXTarialBluNoPad">&nbsp;</td>
  </tr>
</table>
<table  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="90" class="TXTarialBluPad">&nbsp;</td>
    <td>&nbsp;</td>
    <td class="TXTarialBluNoPad"><a href="#" class="A_Under_Green"
onClick="AddRowBudget();return false;">New Vendor/partner
buget's</a></td>
  </tr>
  <tr>
    <td class="TXTarialBluPad">Totale budget </td>
    <td>&nbsp;</td>
    <td class="TXTarialBluNoPad"><label></label></td>
  </tr>
</table>
</body>
</html>
-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG

 		var tr  = document.createElement("<tr'>");
Togli quella singola virgoletta, è quella che fa casini con il tag tr.
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

 var tr  = document.createElement("<tr'>");
Grazie Cristiano, mi era scappata....
Ora ci sono quasi, ma mi da sempre un errore quando dopo un primo nodo
cerco di crearne un'altro senza inserire i valori...
----------
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
//********************************
// valori nutrizionali, crea righe
//********************************
var ContaRighe = 0;
function AddRowBudget(){
var error = 1;
var obj = document.getElementById;
alert('Valore in ingresso: '+ContaRighe);
//alert(obj('BugetVendorNome'+(ContaRighe)).value);
if(obj('BugetVendorNome'+ContaRighe).value==''||obj('BugetVendorImporto'+ContaRighe).value==''){
alert('Compilate i due campi precedenti prima di fare un nuovo
inserimento');
error = 1;
}else{
error = 0 //se tutto OK
}
if(error==0){
ContaRighe = ContaRighe+1
alert('Valore in assegnazione alla riga che stai
creando:'+ContaRighe);
var tr  = document.createElement("<tr>");
tr.id
 = 'TRcreataDinamicamente'+ContaRighe
var td1 = document.createElement("<td>"); //1 - dove ci sono le
scritte
var td2 = document.createElement("<td>"); //2 - spazio 10 px
var td3 = document.createElement("<td>"); //3 - campo vendor
var td4 = document.createElement("<td class='TXTarialBluNoPad'>");
//4 - campo € valore
var td5 = document.createElement("<td class='TXTverdanaRed'>"); //5 -
dove si scrive [-] elimina
//Cella 3
var input1 = document.createElement("<input name='BugetVendorNome'
id='BugetVendorNome"+ContaRighe+"' type='text' style='width: 150px;'
class='TXTarialBluNoPad'>");
input1.id
 = 'Vendor'+ContaRighe
//Cella 4
var TextEuro = document.createTextNode("€ ")
var input2 = document.createElement("<input name='BugetVendorImporto'
id='BugetVendorImporto"+ContaRighe+"' type='text' style='width: 50px;
text-align:right' size='6' maxlength='5'
onKeyUp='SoloNumeri(this.value,
this.name
);'
class='TXTarialBluNoPad'>");
input2.id
 = 'Valore'+ContaRighe
//Cella 5
var A = document.createElement("<a class='A_Under_Red'
id='V"+ContaRighe+"' onClick='Hide(this.id.substr(1),12);return false;'
href='#'>");
var TextA = document.createTextNode("[-] Elimina")
A.appendChild(TextA); //Subordiniamo al TAG <a>
//Nome tabella
var tbl  = document.getElementById('TBLbudget');
//Subordiniamo i valori alle celle
td3.appendChild(input1); //Nome vendor
td4.appendChild(TextEuro); //Prima il simbolo € e poi...
td4.appendChild(input2); //il campo di input relativo
td5.appendChild(A); //Il TAG <a>
//Assegnoi alla riga le celle
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
//alert(tbl.innerHTML)
//Assegno alla tabella la riga
tbl.tBodies(0).appendChild(tr);
}
}
function SoloNumeri(numero,ObjName){
if(isNaN(numero)){
alert('Please, insert only numbers!');
document.getElementById(ObjName).value='';
}
}
</script>
<table  border="0" cellpadding="0" cellspacing="0" id="TBLbudget">
<tr>
<td width="90" class="TXTarialBluPad">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="160" class="TXTarialBluNoPad">&nbsp;</td>
<td class="TXTarialBluNoPad">&nbsp;</td>
<td class="TXTarialBluNoPad">&nbsp;</td>
</tr>
<tr>
<td class="TXTarialBluPad">Scc budget</td>
<td>&nbsp;</td>
<td class="TXTarialBluNoPad">&nbsp;</td>
<td align="right" class="TXTarialBluNoPad"> &euro;
<input name="SccBudgetImporto" type="text"
class="TXTarialBluNoPad" id="SccBudgetImporto2"
style="width:50px;text-align:right"
onKeyUp="SoloNumeri(this.value,
this.name
);" maxlength="8"></td>
<td class="TXTarialBluNoPad">&nbsp;</td>
</tr>
<tr>
<td class="TXTarialBluPad">Vendors</td>
<td>&nbsp;</td>
<td class="TXTarialBluNoPad"><input name="BugetVendorNome"
type="text" class="TXTarialBluNoPad" id="BugetVendorNome0"
style="width: 150px;"></td>
<td class="TXTarialBluNoPad">&euro;
<input name="BugetVendorImporto" type="text"
class="TXTarialBluNoPad" id="BugetVendorImporto0" style="width:50px;
text-align:right" onKeyUp="SoloNumeri(this.value,
this.name
);"
maxlength="8"></td>
<td class="TXTarialBluNoPad">&nbsp;</td>
</tr>
</table>
<table  border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="90" class="TXTarialBluPad">&nbsp;</td>
<td width="10">&nbsp;</td>
<td class="TXTarialBluNoPad"><a href="#" class="A_Under_Green"
onClick="AddRowBudget();return false;">New Vendor/partner
buget's</a></td>
</tr>
<tr>
<td class="TXTarialBluPad">Totale budget </td>
<td>&nbsp;</td>
<td class="TXTarialBluNoPad"></td>
</tr>
</table>
</body>
</html>

 cerco di crearne un'altro senza inserire i valori...
Non so bene cosa stai cercando di creare, mi spiace ma non posso studiarmi
tutta 'sta pappardella...
copiaincollato cosģ com'č mi obbliga a compilare, compilo, aggiungo,
ricompilo le 2 nuove text (quindi anche se č compilato) e segnala errore.
Cerca di fare un esempio di poche righe che simuli l'errore.


class='TXTarialBluNoPad'>");
N.B. Se definisci gli attributi nella stringa passata a createElement
funziona solo con IE. Ovviamente se non li definisci nella stringa e
li setti dopo, con IE non funziona piu' come dovrebbe :-)
'bye

Ho capito era un problema di Doppio ID.
id='BugetVendorNome"+ContaRighe+"' type='text' style='width: 150px;'
class='TXTarialBluNoPad'>");
input1.id
 = 'Vendor'+ContaRighe
Adesso funzioa il controllo....
Solo una cosa...io sto lavorando con gli appunti che ho preso su JS
DIR...vorrei non nascondere un nodo riga ( style="display:none"), ma lo
vorrei rimuoverlo totalmente.
In che modo accedo a questo metodo avendo con ID della riga il valore
ID='TRcreataDinamicamente1'
Ciao e grazie

ID='TRcreataDinamicamente1'
Per rimuovere c'e' la removeChild:
[parent_object].removeChild([children_object]);
'bye

 ID='TRcreataDinamicamente1'
Se questo č l'ID della riga puoi accederci (a questo oggetto, non a questo
metodo) con document.getElementById('tuoid').
Come fai perň? Non hai un id incrementale? Devi trovare un modo (dipende
dal contesto, io cercherei di passare l'oggetto stesso alla funzione che si
occupa dell'eliminazione) per sapere l'id, visto che non č fisso...
-- 
"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.

Ciao Cristiano e Agostino,
grazie ad entrambi per l'aiuto.
Ci sono quasi ma qualche cosa sembra non funzionare.
Di fatto sulla creazione del link che poi rimuovera la riga gli passo
ID della tabella e ID delle riga + il suo numero progressivo.
Alla creazione di una nuova riga mi da errore alla riga 2...che non che
nulla. Se tolgo la chiamata alla funzione e faccio un semplice alert
sul numero che gli passo è corretto...
var A = document.createElement("<a class='A_Under_Red'
id='V"+ContaRigheAtt+"' href='#'
onClick='RimuoviRiga('TBLallegati','TRcreataDinamicamenteAtt',this.id.substr(1));return
false;'>");
function RimuoviRiga(TblM,TrF,i){
var Madre  = document.getElementById(TblM);
var Figlia = document.getElementById(TrF+i);
Madre.removeChild(Figlia);
}
*********
Qui il codice completo se volete provare in na pagina
*********
var ContaRigheAtt = 0;
function AddRowAttachment(){
var error = 1;
var obj = document.getElementById;
//alert('Valore in ingresso: '+ContaRigheAtt);
//alert(obj('BugetVendorNome'+(ContaRighe)).value);
if(obj('FIle'+ContaRigheAtt).value==''){
alert('Compilate il campo precedente prima di un nuovo inserimento');
error = 1;
}else{
error = 0 //se tutto OK
}
if(error==0){
ContaRigheAtt = ContaRigheAtt+1
//alert('Valore in assegnazione alla riga che stai
creando:'+ContaRigheAtt);
var tr  = document.createElement("<tr>");
tr.id
 = 'TRcreataDinamicamenteAtt'+ContaRigheAtt
var td1 = document.createElement("<td>"); //1 - dove ci sono le
scritte
var td2 = document.createElement("<td>"); //2 - spazio 10 px
var td3 = document.createElement("<td>"); //3 - campo File
var td4 = document.createElement("<td class='TXTverdanaRed'>"); //4 -
dove si scrive [-] elimina
//Cella 3
var input1 = document.createElement("<input name='File'
id='File"+ContaRigheAtt+"' type='file' style='width: 300px;'
class='TXTarialBluNoPad'>");
//Cella 4
var A = document.createElement("<a class='A_Under_Red'
id='V"+ContaRigheAtt+"' href='#'
onClick='RimuoviRiga('TBLallegati','TRcreataDinamicamenteAtt',this.id.substr(1));return
false;'>");
var TextA = document.createTextNode(" [-] Elimina")
A.appendChild(TextA); //Subordiniamo al TAG <a>
//Nome tabella
var tbl  = document.getElementById('TBLallegati');
//Subordiniamo i valori alle celle
td3.appendChild(input1); //Nome vendor
td4.appendChild(A); //Il TAG <a>
//Assegnoi alla riga le celle
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);


 false;'>");
Qua c'è casino con le virgolette: usi " ... " per il createElement, poi
onClick=' .... ' ma dentro onclick hai ancora '...' .......
Qualcosa devi sostituirla con \; esempio
onclick='RimuoviRiga(\'...\',\'....\')'


Ho provato così ma ancora niente...
var DueID = "'TBLallegati','TRcreataDinamicamenteAtt"+ContaRigheAtt+"'"
e questo su un alert()
mi restituisce quello che voglio ossia:
'IDtabellaMadre','IDRigaN'
Adesso dato che mi ricordo che in un mio post del passato forse proprio
tu mi avevi suggerito di crearmi la stringa fuori a parte la passo alla
funzione così:
onClick='RimuoviRiga("+DueID+");return false;'
Ma mi da sempre un errore alla riga due...
Idee?
//Questa viene richiamata sulclick su elimina....
function RimuoviRiga(TblM,TrF){
var Madre  = document.getElementById(TblM);
var Figlia = document.getElementById(TrF);
Madre.removeChild(Figlia);
}

 function RimuoviRiga(TblM,TrF){
Qua TblM contiene il valore della variabile sopra indicata, TrF è null....
Hai capito il problema?
soluzione a) Rimuovi le singole virgolette alla variabile sopra, poi
RimuoviRiga(TblM) {
 var TrF=TblM.split(",")[0]; 
 TblM=TblM.split(",")[1];
Soluzione b) (sono un po' arrugginito con eval perché non lo uso da anni ma
potrebbe andare): "....onClick='eval(RimuoviRiga("+DueID+"));return
false'..."
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

Cristiano,
grazie dell'idea che mi sembra buonissima non proprio non riesco a
capire.
CMQ, per oggi alzo bandiera bianca e ti lascio il codice completo per
fare un COPIA/INCOLLA in una semplice pagina HTML per capire meglio.
Forse fai prima così che a guardare tra le righe di codice.
Quandoi faccio Click su New attachment già mi da errore e LI NON DEVE
DARLO.
Per oggi chiudo, darò un occhio prima di uscire alle 18.00
speranzoso...
BYE
*************************
Il codice JS e HTML
*************************
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
//********************************
// Elimina la riga creata dinamicamente
//********************************
function RimuoviRiga(TblMTrF){
var TblM = TblMTrF.split(",")[0];
var TrF = TblMTrF.split(",")[1];
var Madre  = document.getElementById(TblM);
var Figlia = document.getElementById(TrF);
//alert(i);
//alert(TblM);
//alert(TrF);
Madre.removeChild(Figlia);
}
//********************************
// Attachment
//********************************
var ContaRigheAtt = 0;
function AddRowAttachment(){
var error = 1;
var obj = document.getElementById;
//alert('Valore in ingresso: '+ContaRigheAtt);
//alert(obj('BugetVendorNome'+(ContaRighe)).value);
if(obj('FIle'+ContaRigheAtt).value==''){
alert('Compilate il campo precedente prima di un nuovo inserimento');
error = 1;
}else{
error = 0 //se tutto OK
}
if(error==0){
ContaRigheAtt = ContaRigheAtt+1
var DueID =
"'TBLallegati','TRcreataDinamicamenteAtt"+ContaRigheAtt+"'"
//alert(DueID);
//alert('Valore in assegnazione alla riga che stai
creando:'+ContaRigheAtt);
var tr  = document.createElement("<tr>");
tr.id
 = 'TRcreataDinamicamenteAtt'+ContaRigheAtt
var td1 = document.createElement("<td>"); //1 - dove ci sono le
scritte
var td2 = document.createElement("<td>"); //2 - spazio 10 px
var td3 = document.createElement("<td>"); //3 - campo File
var td4 = document.createElement("<td class='TXTverdanaRed'>"); //4 -
dove si scrive [-] elimina
//Cella 3
var input1 = document.createElement("<input name='File'
id='File"+ContaRigheAtt+"' type='file' style='width: 300px;'
class='TXTarialBluNoPad'>");
//Cella 4
var A = document.createElement("<a class='A_Under_Red' href='#'
onClick='RimuoviRiga("+DueID+");return false;'>");
var TextA = document.createTextNode(" [-] Elimina")
A.appendChild(TextA); //Subordiniamo al TAG <a>
//Nome tabella
var tbl  = document.getElementById('TBLallegati');
//Subordiniamo i valori alle celle
td3.appendChild(input1); //Nome vendor
td4.appendChild(A); //Il TAG <a>
//Assegnoi alla riga le celle
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
alert(tbl.innerHTML)
//Assegno alla tabella la riga
tbl.tBodies(0).appendChild(tr);
}
}
</script>
<table  border="0" cellpadding="0" cellspacing="0" id="TBLallegati">
<tr>
<td width="90" class="TXTarialBluPad">Attachment</td>
<td width="10">&nbsp;</td>
<td><input name="File" type="file" class="TXTarialBluNoPad"
id="File0" style="width:300px;"></td>
<td>&nbsp;</td>
</tr>
</table>
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="90">&nbsp;</td>
<td width="10">&nbsp;</td>
<td class="TXTarialBluNoPad"><a href="#" class="A_Under_Green"
onClick="AddRowAttachment();return false;">New attachment </a></td>
</tr>
</table>
</body>
</html>

 if(obj('FIle'+ContaRigheAtt).value==''){
if(document.getElementById('FIle'+ContaRigheAtt).value=='') {
 //(sicuro che si chiami FIle con FI maiuscole? ricorda che č
case-sensitive...)
Ciao e a Lunedě
-- 
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
									    B.M.

Effettivamente mi era scappato...si chiama "File"...
Ma comunque da errore sul click.
Se escludi la funzione sul Onclick su [-] Elimina...sembra andare, e
quindi l'errore è per forza di cose in quel punto ossia nella chiamata
alla funzione.
Speriamo nel week...
BYE
E Grazie come sempre

 onClick='RimuoviRiga("+DueID+");return false;'>");
var A = document.createElement("a");
A.className="A_Under_Red";
A.setAttribute("href","javascript:void(RimuoviRiga("+DueID+"))");
Cosi' dovrebbe andare, a meno di errori di distrazione da parte mia (data
l'ora, e' probabile).
In sintesi:
- tentavi di rimuovere "una riga da una tabella". Logicamente ti puo' anche
tornare, ma a livello pratico un tag TR non e' figlio diretto di un tag
TABLE, bensi' "nipote". E quindi ti dava errore. Ho rimosso il problema
alla radice, facendo recuperare alla riga stessa il nodo di cui e' figlia
(che nel tuo caso, comunque, e' un tag TBODY).
Da qui le modifiche alla function "RimuoviRiga" e alla variabile "DueID"
che usavi come parametro.
Ho poi preferito modificare il codice di creazione link perche' in questo
modo e' piu' chiaro, e nell'altro avevi problemi di sovrapposizione apici. 
-- 
ZER0://coder.gfxer.web-designer/
~ "When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)
on air ~ "Green Day - Boulevard of Broken Dreams"

 modo e' piu' chiaro, e nell'altro avevi problemi di sovrapposizione apici.
quel void che significa??
Ciao e Grazie.

 IE/wintel based).
Ci tengo a sottolineare che non sono entrato nel merito della logica ma
solo degli errori segnalati, Concordo sull'orrore.
