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>