aggiungere/cancellare tabella dinamicamente

**glochis** · 09-10-2006, 11:48

Ciao a tutti!
Ho preso "in prestito" un codice js che un utente del forum già aveva illustrato in un post precedente.
In quel caso si richiedeva l'aggiunta/cancellazione di una riga con un input al suo interno.
Io però avrei necessità di aggiungere un blocco di righe, possibilmente racchiuse in una tabella.
Non son stato capace di creare la TABLE e pertanto mi aggiunge le righe, ma poi, se voglio cancellare il blocco di righe creato, me ne cancella una alla volta.
Qualcuno saprebbe darmi una mano per favore?
Io non mastico js così bene da saper modificare il giusto codice, probabilmente la soluzione sta nel modificare del codice nella "function rimuovi()" (ma credo debba essere aggiunto qualcosa nella "function accoda()" per creare la TABLE)

Grazie mille!

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>aggiungi / rimuovi campi input</title>
<script language="JavaScript" type="text/javascript">
<!--
var num=1;
function accoda(){
	if(document.createElement && document.getElementById && document.getElementsByTagName) {
		// crea elementi
		var oTr1=document.createElement("TR");
		var oTr2=document.createElement("TR");
		var oTr3=document.createElement("TR");
		var oTr4=document.createElement("TR");
		var oTr5=document.createElement("TR");
		var oTd1=document.createElement("TD");
		var oTd2=document.createElement("TD");
		var oTd3=document.createElement("TD");
		var oTd4=document.createElement("TD");
		var oTd5=document.createElement("TD");
		var oTd6=document.createElement("TD");
		var oTd7=document.createElement("TD");
		var oTd8=document.createElement("TD");
		var oTd9=document.createElement("TD");
		var oTd10=document.createElement("TD");
		var oFieldinp1=document.createElement("TEXTAREA");
		var oFieldinp2=document.createElement("INPUT");
		var oFieldinp3=document.createElement("INPUT");
		var oFieldinp4=document.createElement("INPUT");
		var oText1=document.createTextNode("Articolo "+num);
		var oText2=document.createTextNode("Scegli file"+num);
		var oText3=document.createTextNode("Autori "+num);
		var oText4=document.createTextNode("Parole Chiave "+num);

		// setta attributi
  		oFieldinp1.setAttribute("cols","40");
		oFieldinp1.setAttribute("name","Articolo"+num);
  		oFieldinp2.setAttribute("type","file");
		oFieldinp2.setAttribute("name","file "+num);
  		oFieldinp3.setAttribute("type","text");
		oFieldinp3.setAttribute("name","autore"+num);
  		oFieldinp4.setAttribute("type","text");
		oFieldinp4.setAttribute("name","chiave"+num);

		// appendi al relativo padre
		oTd1.appendChild(oText1);
		oTd2.appendChild(oFieldinp1);
		oTd3.appendChild(oText2);
		oTd4.appendChild(oFieldinp2);
		oTd5.appendChild(oText3);
		oTd6.appendChild(oFieldinp3);
		oTd7.appendChild(oText4);
		oTd8.appendChild(oFieldinp4);
		oTr1.appendChild(oTd1);
		oTr1.appendChild(oTd2);
		oTr2.appendChild(oTd3);
		oTr2.appendChild(oTd4);
		oTr3.appendChild(oTd5);
		oTr3.appendChild(oTd6);
		oTr4.appendChild(oTd7);
		oTr4.appendChild(oTd8);
		oTr5.appendChild(oTd9);
		oTr5.appendChild(oTd10);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr1);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr2);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr3);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr4);
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr5);
		// incrementa variabile globale
		num++
	}
}

function rimuovi(){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		// se non e' la prima riga
		if(num>1){
			// riferimento al tbody
			var tb1=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			var tb2=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			var tb3=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			var tb4=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			var tb5=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			// riferimento all' ultimo TR
			var lastTr1=tb1.getElementsByTagName('TR')[(tb1.getElementsByTagName('TR').length)-1]
			var lastTr2=tb2.getElementsByTagName('TR')[(tb2.getElementsByTagName('TR').length)-1]
			var lastTr3=tb3.getElementsByTagName('TR')[(tb3.getElementsByTagName('TR').length)-1]
			var lastTr4=tb4.getElementsByTagName('TR')[(tb4.getElementsByTagName('TR').length)-1]
			var lastTr5=tb5.getElementsByTagName('TR')[(tb5.getElementsByTagName('TR').length)-1]
			// rimuovi
			tb1.removeChild(lastTr1);
			tb2.removeChild(lastTr2);
			tb3.removeChild(lastTr3);
			tb4.removeChild(lastTr4);
			tb5.removeChild(lastTr5);

			// decrementa variabile globale
			num--
		}
	}
}
//-->
</script>
</head>
<body>
<form name="modulo" action="aa">
<input type="button" value="accoda" onclick="accoda()"> <input type="button" value="rimuovi" onclick="rimuovi()"> 
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td><td>riga 0</td>

</tr>
</tbody>
</table>
</form>
</body>
</html>

**glochis** · 09-10-2006, 23:32

up

**Xinod** · 10-10-2006, 13:39

codice:

function rimuovi(){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		if(num>1){
			var tb0=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			var len=tb0.childNodes.length-1
			for(var i=len;i>len-5;i--){
				tb0.removeChild(tb0.childNodes[i]);
			}
			num--
		}
	}
}

ci sarebbero varie considerazioni da fare su come usi quel codice
x es. la rappresentazione di quel tipo di form non e' idealmente tabulare,
non dovresti usare tabelle in questo caso
ciao

**glochis** · 10-10-2006, 15:38

Grazie per la risposta, Xinod!

Sono pronto a qualsiasi cambiamento: il fatto di fare la tabella era perchè in quel modo, quiando clicco "rimuovi", il gruppo <table></table> veniva cancellato.

Ma magari va bene cancellare gruppi di <tr>, ma non so proprio come farlo...

Ciao grazie!

**Xinod** · 10-10-2006, 15:57

non e' questione di rimuovere tabelle oppure tr,
come direbbe qualcuno un po' fissato con il web semantico

, quel contenuto non si presta ad essere presentato sotto forma di tabella

capisco che forse troverai comodo formattare con le tabelle, ma questa e' una cattiva abitudine derivata dall' usare le tabelle per costruire interi layout
le tabelle servono a formattare dati di tipo, appunto, tabulare
elementi piu' generici per la formattazione sono i div

se interessa puoi trovare molti spunti di approfondimento in tante discussioni del forum css
ciao

**glochis** · 10-10-2006, 15:59

Grazie, cercherò lì.
ciao!

Discussione: aggiungere/cancellare tabella dinamicamente

Strumenti discussione

Ricerca discussione

Visualizza

aggiungere/cancellare tabella dinamicamente

Permessi di invio