¿ Cómo hacer editable una tabla de html ?

el_universitario · #1 (**permalink**) 17/06/2009, 07:30

Hola amigos del foro, espero que esten todos bien.

Como lo escribo en el titulo necesito hacer que una tabla de html sea totalmete editable, mas o menos como lo es en excel o una tabla del word, que se pueda editar una celda, aumentar filas, eliminar filas, ponerle un tipo de letra a un determinado contenido de una celda y cosas asi, me imagino que con javascript es esto posible.

Espero que alguien me pueda ayudar, gracias de antemano.

Adler · #2 (**permalink**) 17/06/2009, 07:58

Hola, bienvenido al foro

Esto sería un inicio

Código javascript:

Ver original<html><head>
<title>Agregar fila de campos DINAMICOS</title>
 
<script type="text/javascript">
function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","center");
 
var celda1 = document.createElement("TD");
var codigo = document.createElement("INPUT");
codigo.setAttribute("type","text");
codigo.setAttribute("size","8");
codigo.setAttribute("maxlength","20");
codigo.setAttribute("name","codigo" + cont.value);
celda1.appendChild(codigo);
 
var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = '';
opcioncur.value = '';
sel.appendChild(opcioncur);
 
opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "este Select depende de lo que";
opcion1.value = "este Select depende de lo que";
sel.appendChild(opcion1);
 
opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "se ponga en el anterior campo";
opcion2.value = "se ponga en el anterior campo";
sel.appendChild(opcion2);
 
celda2.appendChild(sel);
 
var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","1");
valorA.setAttribute("maxlength","3");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA);
 
var celda4 = document.createElement("TD");
var valorB = document.createElement("INPUT");
valorB.setAttribute("type","text");
valorB.setAttribute("size","1");
valorB.setAttribute("maxlength","3");
valorB.setAttribute("name","valorB" + cont.value);
celda4.appendChild(valorB);
 
var celda5 = document.createElement("TD");
var valorC = document.createElement("INPUT");
valorC.setAttribute("type","text");
valorC.setAttribute("size","1");
valorC.setAttribute("maxlength","3");
valorC.setAttribute("name","valorC" + cont.value);
//onfocus="fc(this)"
celda5.appendChild(valorC);
 
var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);}
celda6.appendChild(boton);
 
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
 
tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
 
 
function fc(campo) {
    var n=parseInt(campo.name.substr(6),10);
    var    a=campo.form.elements["valorA"+n];
    var    b=campo.form.elements["valorB"+n];
    var na=parseFloat(a);
    var nb=parseFloat(b);
    if (isNaN(na)) { na=0; }
    if (isNaN(nb)) { nb=0; }
    campo.value=na+nb;
    campo.blur();
} 
</script>
</head>
<body onLoad="adicionarFila()">
<Form name="detalle" action="ej.asp" method="get">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table align=center width=20% cellpadding=0 cellspacing=0 id="contenido" border="1">
<tr align="center">
<td>codigo</td>
<td>Select dependiente de Codigo</td>
<td>A +</td>
<td>B =</td>
<td>C</td>
<td>&nbsp;</td>
</tr>
</table>
<table align=center width=20% cellpadding=0 cellspacing=0 border="1">
<tr>
<td>&nbsp;</td>
</tr>
<tr align="center">
<td align="CENTER"><input name="enviar" type="submit" id="enviar" value="enviar" onClick="filas.value=cont.value, cont.value=0">
<input name="nueva_fila" type="button" id="nueva_fila" value="nueva fila" onClick="adicionarFila()"></td>
</tr>
</table>
</form>
</body>
</html>

Suerte

el_universitario · #3 (**permalink**) 17/06/2009, 09:35

gracias por la rapida respuesta, lo que me respondiste es mas o menos lo que estaba buscando, ha una cosa mas que me olvide es que tb se pueda subir o bajar filas, y que la celda solo sea editable cuando yo haga doble click sobre ella y cuando haga click fuera de ella se mestre como una celda normal. o si conoces del alguna libreria en javascript que ya haga todo eso tb estaria bien.

Espero que en eso mas me puedas colaborar, nuevamente gracias.

Adler · #4 (**permalink**) 17/06/2009, 12:32

Hola

Hace bastante tiempo, creo que vi algo en Mootool junto con Ajax que hacía algo de eso

Suerte

el_universitario · #5 (**permalink**) 17/06/2009, 15:19

Gracias Adler, vi esa libreria y me parece muy pero muy buena tiene todas las cosas que necesito. gracias nuevamente

wildnetboy · #6 (**permalink**) 08/12/2009, 10:15

hola...
muy bueno el script ese para las tablas me paece super, te pido permiso para ponerlo en mi web, ahora... una preguntota como recupero los datos de la tabla???

Muchisimas gracias...