sostituzione onlick

[jimbo0]

salve ho una tabella fatta nel seguente modo

<table>
<tr>
<td>


riga1</p>
<span>bla</span><span>blu</span>
</td>
</tr>
</table>

vorrei che al click sul paragrafo questo venga sostituito con

<form><input type="text" value="riga1"></form>

in pratica al posto del testo deve esserci un campo di testo dello stesso valore (lasciando gli span al posto loro)
lo scopo chiaramente è rinominare dei file (la parte lato server è già scritta) ci sto sbattendo la testa da un po', sono riuscito solo a nascondere il paragrafo con display:none

chiaramente sono molto arrugginito in javascript

ho pensato (solo ora..) che si potrebbe stampare insieme alla tabella anche il form già messo al suo posto,nascosto con display:none, e poi al click sul paragrafo nascondere questo e visualizzare il campo di testo, ma chiedo aiuto perché sono esaurito

<table>
<tr>
<td>


riga1</p>
<form><input type="text" value="riga1"></form>
<span>bla</span><span>blu</span>
</td>
</tr>
</table>

[skjobax]

nell'onclick del td corrispondente:

this.innerHTML="

Codice HTML da inserire</p>";

Ricorda che però così sostituirai tutto il codice HTML contenuto in td.

Oppure puoi mettere il form nel td con display a none e cambiarlo con display block; stesso con il testo originale.

[jimbo0]

volevo evitare di usare innerhtml, ma va bene in mancanza d'altro, solo che ho provato

function input_replace(){
	this.innerHTML="abc"
	
	}

<td><p onclick="input_replace()">entry1</p></td>

e non va neanche così
evidentemente il this non va bene usato così, ma individuare con getElementById mi complica la vita molto di più, come posso mantenerlo 'generale'?: se ti clicco devi scoparire e far apparire il campo di testo

[cavicchiandrea]

Fai cosi che è meglio:

<table>
<tr>
<td onclick="document.getElementById('form1').style.display='block'">


riga1</p>
<form id="form1" style="display:none"><input type="text" value="riga1"></form>
<span>bla</span><span>blu</span>
</td>
</tr>
</table>

[jimbo0]

Originariamente inviato da cavicchiandrea
Fai cosi che è meglio:

<table>
<tr>
<td onclick="document.getElementById('form1').style.display='block'">


riga1</p>
<form id="form1" style="display:none"><input type="text" value="riga1"></form>
<span>bla</span><span>blu</span>
</td>
</tr>
</table>

grazie della disponibilità, ma a me servirebbe la parte js

sono arrivato a questo punto

function input_replace(p,file){
	p.innerHTML='<form><input type="text" value="'+file+'">';
	
	}

<td><p onclick="input_replace(this,'sono il sostituto')">entry1</p>

sono sicuro che è sbagliata la riga della funzione, non riesco a costruire la stringa, tra apici e doppi apici non esce mai bene (vedendo il sorgente generato)

edit: ok ho risolto, la stringa funziona, era un problema di css

[jimbo0]

altro piccolo problema:
quando clicco sul paragrafo questo viene sostituito dal campo di testo (come deve essere), il problema è che se clicco sul campo di testo la funzione onclick precedente viene chiamata di nuovo, rendendomi impossibile la modifica del testo

[Vindav]

il codice che hai postato non sostituisce il paragrafo con il campo di testo

[jimbo0]

Originariamente inviato da Vindav
il codice che hai postato non sostituisce il paragrafo con il campo di testo

perché no?funziona

function input_replace(p,file){
formexp =/<form/
if (!formexp.test(p.innerHTML)) p.innerHTML='<form><input name="newname" type="text" value="campo" />';
}

ho messo quel controllo per tentare di risolvere il problema del precedente post.
in pratica devo riuscire a controllare se ho già cliccato sul paragrafo o no.
con questa regexp improvvisata sembra che funzioni con ff ma non con chrome

[cavicchiandrea]

innerHTML non è supportato da tutti i browser usa mostra/nascondi fidati tanto il risultato è identico.

[jimbo0]

Originariamente inviato da cavicchiandrea
innerHTML non è supportato da tutti i browser usa mostra/nascondi fidati tanto il risultato è identico.

è la condizione (if(!formexp.test..)) che non funziona in chrome, non la sostituzione del campo di testo
farò come dici che è sicuramente la soluzione più pulita e poi avevo già detto che preferivo non usare innerhtml, ma, per ora, come posso aggiustare quella condizione?