ayuda al crear una tabla

[jos18g]

Hola bueno este es mi prmer post espero me ayuden, bueno el problema es el siguiente:
al hacer clic en el texto que esta dentro de un <div></div> quiero que me salga una tabla con 3 columnas como la que muestro en la imagen pero quiero que se elimine e texto que puse, y que mitabla ocupe su lugar


En javascript

Código:

function crearTablaInput(idDiv, idInput){
	var divcontenedor = document.getElementById(idDiv);
	//Creo la tabla
	var tabla = document.createElement('table');
	tabla.border = '0';		
	//Creo la primera fila
	var tr = document.createElement('tr');		
	//Creo la primera celda
	var td = document.createElement('td');	
	//aqui va el textfield
	//se puede crear un switch 0 mande crea input 1 crea combo 2cre texarea 
	td.innerHTML ="<input type='text' class='input1'  value='"+divcontenedor.innerHTML+"' id='"+idInput+"' size='15' maxlength='20'>";
	tr.appendChild(td); //Agrego la celda a la fila
	//Creo la segunda celda
	var td = document.createElement('td');
	td.innerHTML = '<img src="img/check.png" width="16" height="16">';
	tr.appendChild(td); //Agrego la celda a la fila
	//Creo la tercera celda
	var td = document.createElement('td');
	td.innerHTML = '<img src="img/equis.png" width="16" height="16">';
	tr.appendChild(td); //Agrego la celda a la fila
	tabla.appendChild(tr); //Agrego la cuerpo de la tabla a la misma
	//Agrego la tabla en algun lado de mi página
	divcontenedor.appendChild(tabla);
		
	}

en html

Código HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="nombre" onclick="crearTablaInput(this.id, 'nombre')">Jose</div></td>
    <td>&nbsp;</td>
  </tr> 
</table> 

Agradeceria si me ayudasen.

[JavierB]

Hola jos18g. Bienvenido al foro.

Modifica un poco el HTML:

Código:

<td><div id="nombre" onclick="crearTablaInput(this, 'nombre')">Jose</div></td>

y otro poco la función:

Código:

function crearTablaInput(obj, idInput){
  txt = obj.innerHTML;
  obj.innerHTML = '';
	var divcontenedor = document.getElementById(obj.id);
	//Creo la tabla
	var tabla = document.createElement('table');
	tabla.border = '0';		
	//Creo la primera fila
	var tr = document.createElement('tr');		
	//Creo la primera celda
	var td = document.createElement('td');	
	//aqui va el textfield
	//se puede crear un switch 0 mande crea input 1 crea combo 2cre texarea 
	td.innerHTML ="<input type='text' class='input1'  value='"+txt+"' id='"+idInput+"' size='15' maxlength='20'>";
	tr.appendChild(td); //Agrego la celda a la fila
	//Creo la segunda celda
	var td = document.createElement('td');
	td.innerHTML = '<img src="img/check.png" width="16" height="16">';
	tr.appendChild(td); //Agrego la celda a la fila
	//Creo la tercera celda
	var td = document.createElement('td');
	td.innerHTML = '<img src="img/equis.png" width="16" height="16">';
	tr.appendChild(td); //Agrego la celda a la fila
	tabla.appendChild(tr); //Agrego la cuerpo de la tabla a la misma
	//Agrego la tabla en algun lado de mi página
	divcontenedor.appendChild(tabla);
		
	}

Saludos,

[jos18g]

gracias me funciono