Impaginare tabella con innerHTML

[lyllo]

quasi tutto nel titolo.

non riesco ad impaginare una tabella come vorrei.
creo dinamicamente con innerHTML dei contenuti di un div.
al suo interno vorrei creare una tabella che cambi riga ogni tot di elementi.
solo che non funge e ogni volta firefox mi manda a capo l'elemento che ho creato

function crea_tbl(let){
	n = parseInt(document.getElementById("n_m").value);
	layout = "<table>";
	if(n % 6 == 0){
		riga = "</tr><tr><td>"
		}
	else{
		riga = "<td>"
	}
	alert(riga);
	var tabella = "<fieldset style='border: 1px solid black; width: 120px;'><legend>Nemico "+let+"</legend><font style='font-family: tahoma; font-size: 8pt;'><input type='radio' name='show_mostro' onclick='mostra(field_"+let+")' selected='true'> ON | <input type='radio' name='show_mostro' onclick='nascondi(field_"+let+")'> OFF 
</font></fieldset><fieldset id='field_"+let+"' style='border: 1px solid black; width: 100px;'> <legend>Nemico "+let+" <input type='text' disabled='true' size='2' id='iniziativa_'"+let+" style='border: 0; background-color: transparent;'></legend><fieldset style='border: 1px solid black; width: 100px;'><legend>Iniziativa</legend>Tira di nuovo<input type='text' size='2' id='mod_iniziativa_'"+let+"></fieldset><table></table></fieldset> ";
	tabella = layout + riga + tabella;
	return tabella;
}

[cavicchiandrea]

Per tale operazione usa il DOM http://javascript.html.it/guide/lezi...etto-document/

[lyllo]

grazie del link, solo che non so cosa cercare per regolarmi.
in effetti ora che testo la funzione, noto che se aggiungo un elemento con il secco innerHTML, i valori inseriti negli elementi già esistenti spariscono.

io invece vorrei aggiugnere senza perdere i contenuti precedenti.
non devo usare innerHTML ma appendchild?

[lyllo]

il principio è:

creo una stringa con tutto quello che voglio inserirci dentro
e poi lo appendo?

il punto è che intanto ricevo un errore che appendChild is not a function...

...
	var tbody = document.getElementsByTagName("DIV"); 
//	alert(tbody[0].id+"\n"+tbody[1].id+"\n"+tbody[2].id+"\n"+tbody[3].id+"\n")
	
	pippo =  crea_tbl(lettera);
	var cont = document.createElement("TR");
	tbody.appendChild(cont);
...

function crea_tbl(let){
/*	layout = "<table>";
	if(n % 6 == 0){
		riga = "</tr><tr><td>"
		}
	else{
		riga = "<td>"
	}
	alert(riga);*/
	var tabella = "<fieldset style='border: 1px solid black; width: 120px;'><legend>Nemico "+let+"</legend><font style='font-family: tahoma; font-size: 8pt;'><input type='radio' name='show_mostro_"+let+"' onclick=\"mostra('field_"+let+"')\" checked='true'> ON | <input type='radio' name='show_mostro_"+let+"' onclick=\"nascondi('field_"+let+"')\> OFF 
</font></fieldset><fieldset id='field_"+let+"' style='border: 1px solid black; width: 100px;'> <legend>Nemico "+let+" <input type='text' disabled='true' size='2' id='iniziativa_"+let+"' style='border: 0; background-color: transparent;'></legend><fieldset style='border: 1px solid black; width: 100px;'><legend>Iniziativa</legend>Tira di nuovo<input type='text' size='2' id='mod_iniziativa_"+let+"'></fieldset><table></table></fieldset> ";
//	tabella = layout + riga + tabella;
	return tabella; 
}

[lyllo]

facendo così:

	pippo =  crea_tbl(lettera);
	var cont = document.createTextNode(pippo);
	var odiv = document.createElement("DIV");
	odiv.appendChild(cont);
	document.getElementById('griglie').appendChild(odiv);

qualcosa funziona.
solo che invece di mostrarmi gli oggetti html, mi mostra solo il testo.
questo perchè forseho usato createTextNode, ma se utilizzavo createelement ricevevo un errore di sintassi.
devo fare tutto esplicito a mano?
cioè, invece di fare una stringa, devo costruire a mano ogni cosa?
cioè:
createElement(fieldset)
create(table)
etc
e poi annidarli uno nell'altro come mi serve?

[lyllo]

	var f1 = document.createElement("FIELDSET");
	f1.setAttribute('style', 'border: 1px solid black; width: 120px;');
	var l1 = document.createElement("LEGEND");
	l1.innerHTML = "Nemico "+lettera;
	var ron = document.createElement("INPUT");
	idron = "show_mostro_"+lettera;
	ron.setAttribute('type', 'radio');
	ron.setAttribute('id',idron);
	ron.setAttribute('checked','true');
	var roff = document.createElement("INPUT");
	idroff = "show_mostro_"+lettera;
	ron.setAttribute('type', 'radio');
	ron.setAttribute('id',idroff);
	ron.setAttribute('checked','false');
	
	var f2 = document.createElement("FIELDSET");
	f2.setAttribute('style', 'border: 1px solid black; width: 100px;');
	idf2 = "field_"+lettera;
	f2.setAttribute('id',idf2);
	var l2 = document.createElement("LEGEND");
	l2.innerHTML = "Nemico "+lettera;
	var i1 = document.createElement("INPUT");
	idi1 = "iniziativa_"+lettera;
	i1.setAttribute('id', idi1);
	i1.setAttribute('type', 'text');
	i1.setAttribute('size', '2');
	i1.setAttribute('style', 'border: 0; width: 120px; background-color: transparent;');
	i1.setAttribute('disabled', 'true');
	
	var f3 = document.createElement("FIELDSET");
	f3.setAttribute('style', 'border: 1px solid black; width: 100px;');	
	var l3 = document.createElement("LEGEND");
	l3.innerHTML = "Iniziativa";
	var i2 = document.createElement("INPUT");
	idi2 = "mod_iniziativa_"+lettera;
	i2.setAttribute('id', idi2);
	i2.setAttribute('type', 'text');
	i2.setAttribute('size', '2');
	i2.setAttribute('style', 'border: 1; width: 120px; background-color: transparent;');
	i2.setAttribute('disabled', 'false');	
	
	f1.appendChild(ron);
	f1.appendChild(roff);
	f1.appendChild(f2);

	f2.appendChild(f3);
	f2.appendChild(i1);
	f2.appendChild(l2);	
	
	f3.appendChild(i2);
	f3.appendChild(l3);
	
	document.getElementById('griglie').appendChild(f1);

ora così crea.
solo che gli stili non vengono applicati per nulla.

[lyllo]

allora, non ho fatto in tempo a modificare il precedente post.
cmq:

dopo aver "risolto" il problema della creazione degli oggetti da visualizzare nella pagina, sto provando a creare una tabella che tenga sulla stessa riga gli oggetti senza mandarli a capo in automatico cmoe fa firefox.

nella pagina c'è già una tabella vuota con id: "tbl_griglie".

poi

...
//odiv ora contiene tutti gli oggetti che volevo creare.
odiv.appendChild(f1);
odiv.appendChild(f3);
odiv.appendChild(f2);

//inizio a lavorare sulle righe e colonne della tabella per impaginare il tutto...
var row = document.createElement("TR");
var col = document.createElement("TD");

	if(giri == 0){
		row.appendChild(col);
		col.appendChild(odiv);
		document.getElementById('tbl_griglie').appendChild(row);
		giri++;
	}
	if(giri <= 2){
		col.appendChild(odiv);
		//row.appendChild(col);
		document.getElementById('tbl_griglie').appendChild(col);
		giri++;	
		}
	else{
		row.appendChild(col);
		col.appendChild(odiv);
		document.getElementById('tbl_griglie').appendChild(row);
		giri = 0;
	}

solo che non mi si fila proprio
e continua ad incolonnarmi gli oggetti creati.

[Xinod]

non ti prende gli stili? lo style non e' un attributo, non lo setti con setAttribute,
ma puoi applicarlo brutalmente seguendo la sintassi
riferimentoAdElemento.style.nomeProprietaCamelCase ='valore';
camelCase vuol dire che dove hai un trattino esso cade e la prima lettera successiva diventa maiuscola
background-color diventa backgroundColor
font-size diventa fontSize
...

non puoi riciclare elementi creati in precedenza, non puoi ri-appendere elementi gia' appesi

chiarisci(ti) cosa stai facendo qui, perche' non ha troppo senso

var row = document.createElement("TR");
var col = document.createElement("TD");

	if(giri == 0){
		row.appendChild(col);
		col.appendChild(odiv);
		document.getElementById('tbl_griglie').appendChild(row);
		giri++;
	}
	if(giri <= 2){
		col.appendChild(odiv);
		//row.appendChild(col);
		document.getElementById('tbl_griglie').appendChild(col);
		giri++;	
		}
	else{
		row.appendChild(col);
		col.appendChild(odiv);
		document.getElementById('tbl_griglie').appendChild(row);
		giri = 0;
	}

'tbl_griglie' se non vuoi problemi di compatibilita' dev' essere un <tbody>, non un <table>
se la tabella esiste gia' nel markup specifica un tbody ed appendi ad esso,
se non esiste crea un tbody, appendilo a table, appendi i tr al tbody

piu' probabilmente altre cose che non ho notato

ciao

[lyllo]

mi hai chiuso l'altro topic.
ma sono due argomenti diversi.

in questo chiedo come infilare un numero FISSO di righe, che già conosco in una tabella.

nell'altro come creare un numero X di righe da appendere.
in quell'altro, NON riesco a creare un numero generico di righe, il ciclo for che ho inserito non da gli esiti sperati.

qui mi serve la tabella per impaginare delle cose.

cmq, dici che il problema, in questo caso, è la mancanza di un tbody?
il markup <table> già c'è nella pagina.
io devo infilare le righe o le colonne in quella tabella già esistente.
il punto è questo:
creo un fieldset con delle cose dentro.
firefox mi manda a capo ognuno di quei fieldset.
io vorrei che invece fossero allineati sulla stessa riga.
per questo volevo creare una tabella con un numero di celle incrementali in cui infilare i fieldset.
mi sono spiegato ora?

l'altro topic era per un'altra cosa: vorrei sapere come fare a creare un numero di righe generiche senza doverle scrivere a mano.

grazie.

[Xinod]

qui stai creando una tabella con i metodi del DOM
l' altra discussione ha come titolo "Creazione dinamica tabella con DOM"
il procedimento e' identico = non ti servono 2 discussioni

se vuoi una mano posta esattamente quello che fai,
oppure, ancora meglio, lasci un link dove vedere il tutto in azione