Innanzitutto volevo chiarire che questo è il mio primo post scritto in questo forum e volevo ringraziare chi con la sua esperienza, e pazienza soprattutto, mette a disposizione qui le sue conoscenze per aiutare neofiti come me.
Venendo al dunque, io ho preso spunto da una funzione javascript scritta da Xinod in un post molto tempo fa che permetteva di aggiungere dinamicamente una riga di input con accanto il relativo bottone per rimuovere quella riga. Poiché a me non serviva aggiungere solo una riga alla volta ma proprio una parte di tabella più grande ho modificato quel codice giungendo a questo:
<!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=8;
function accoda(){
if(document.createElement && document.getElementById && document.getElementsByTagName) {
// crea elementi
var oTr=document.createElement("TR");
var oTd1=document.createElement("TD");
var oTd2=document.createElement("TD");
var oTd3=document.createElement("TD");
var oTd4=document.createElement("TD");
var oField1=document.createElement("INPUT");
var oField2=document.createElement("INPUT");
var oField3=document.createElement("INPUT");
var oButt=document.createElement("INPUT");
// setta attributi
oField1.setAttribute("type","text");
oField1.setAttribute("name","testo"+num);
oField2.setAttribute("type","text");
oField2.setAttribute("name","testo"+num+1);
oField3.setAttribute("type","text");
oField3.setAttribute("name","testo"+num+2);
oButt.setAttribute("type","button");
oButt.setAttribute("value","rimuovi");
// setta gestore evento
if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e) ;})
else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi (e);},false)
// appendi al relativo padre
oTd1.appendChild(oField1);
oTd2.appendChild(oField2);
oTd3.appendChild(oField3);
oTd4.appendChild(oButt);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);
oTr.appendChild(oTd3);
oTr.appendChild(oTd4);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr);
var oTr2=document.createElement("TR");
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 oField4=document.createElement("INPUT");
var oField5=document.createElement("INPUT");
var oField6=document.createElement("INPUT");
var oField7=document.createElement("INPUT");
var oField8=document.createElement("INPUT");
var oButt2=document.createElement("INPUT");
// setta attributi
oField4.setAttribute("type","text");
oField4.setAttribute("name","testo"+num+3);
oField5.setAttribute("type","text");
oField5.setAttribute("name","testo"+num+4);
oField6.setAttribute("type","text");
oField6.setAttribute("name","testo"+num+5);
oField7.setAttribute("type","text");
oField7.setAttribute("name","testo"+num+6);
oField8.setAttribute("type","text");
oField8.setAttribute("name","testo"+num+7);
oButt2.setAttribute("type","button");
oButt2.setAttribute("value","rimuovi");
// setta gestore evento
if(oButt2.attachEvent) oButt2.attachEvent('onclick',function(e){rimuovi(e );})
else if(oButt2.addEventListener) oButt2.addEventListener('click',function(e){rimuov i(e);},false)
// appendi al relativo padre
oTd5.appendChild(oField4);
oTd6.appendChild(oField5);
oTd7.appendChild(oField6);
oTd8.appendChild(oButt2);
oTd9.appendChild(oField7);
oTd10.appendChild(oField8);
oTr2.appendChild(oTd5);
oTr2.appendChild(oTd6);
oTr2.appendChild(oTd7);
oTr2.appendChild(oTd8);
oTd6.appendChild(oTd9);
oTd7.appendChild(oTd10);
document.getElementById('tabella').getElementsByTa gName('TBODY')[0].appendChild(oTr2);
// incrementa variabile globale
num=num+8
}
}
function rimuovi(e){
if(document.removeChild && document.getElementById && document.getElementsByTagName) {
if(!e) e=window.event;
var srg=(e.target)?e.target:e.srcElement;
// risali al tr del td che contiene l' elemento che ha scatenato l' evento
while(srg.tagName!="TR"){srg=(srg.parentNode)?srg. parentNode:srg.parentElement}
// riferimento al tbody
var tb=document.getElementById('tabella').getElementsB yTagName('TBODY')[0];
// rimuovi
tb.removeChild(srg);
}
}
//-->
</script>
</head>
<body>
<form name="modulo">
<input type="button" value="accoda" onclick="accoda()" />
<table border="1" id="tabella">
<tbody>
<tr>
<td><input type="text" name="testo0" /></td>
<td><input type="text" name="testo1" /></td>
<td><input type="text" name="testo2" /></td>
<td rowspan="3"><input type="button" disabled="disabled" value="rimuovi" /></td>
</tr>
<tr>
<td rowspan="2"><input type="text" name="testo3" /></td>
<td><input type="text" name="testo4" /></td>
<td><input type="text" name="testo5" /></td>
</tr>
<tr>
<td><input type="text" name="testo6" /></td>
<td><input type="text" name="testo7" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Questo è un codice di prova decontestualizzato dalla pagina web che sto scrivendo. Ma adesso le mie domande in merito sono queste:
1) Come faccio a ottenere un solo bottone rimuovi per tutta la porzione che aggiungo, al posto dei due che sono presenti (uno per ciascuna riga) in modo che esca come la prima parte impostata già nel body html?
2) La prima cella della seconda riga (considerando sempre in riferimento alla porzione di tabella che aggiungo ogni volta) dovrà essere sede di un drop di un'immagine draggata da un altra parte della stessa pagina web e al momento del drop vorrei comparissero automaticamente delle informazioni correlate a quell'immagine nella prima, nella seconda e nella terza cella della prima riga della porzione di tabella che ho aggiunto...come si gestisce tutto ciò? si dovrebbe creare un evento al momento del drop nella cella aggiunta? e il codice jsp di ciò che voglio aggiungere lo devo scrivere comunque dentro il body html?
Scusate se ho scritto qualcosa di insensato o ovvio ma sono alle prime armi...Grazie a chiunque si interessi a questo caso e mi possa fornire un aiuto..
Rispondi quotando
