Crear y editar tablas con JS

David
26 de Agosto del 2005
Muy buenas. Lo que pretendo es lo siguiente: tengo un html con una serie de tablas, y me gustaría modificar su contenido o crear tablas nuevas usando JS. Espero que alguien pueda ayudarme. Muchas gracias.

Cristhian
26 de Agosto del 2005
Que tal, yo también quiero hacer una aportación, espero que les sirva este script, aunque tuve que dividirlo en dos archivos:

ESTE ES EL CODIGO DE LA PAGINA PRINCIPAL:
----------------------------------------------------------------
<html>
<head>
<title>Creación de una Tabla mediante código JS</title>
<script language="javascript">
var titulo=new Array();
function creartabla(fila,columna)
{
document.write("<form action='gentabla.php' method='post'>");
for (tit=0; tit<columna; tit++)
{
num=tit+1;
titulo[tit]="<input type='text' name='titu"+tit+"'>";
document.write ("Introduce Título"+num+": "+titulo[tit]+"<br>");
}
document.write ("<input type='hidden' value="+columna+" name=columnas>");
document.write ("<input type='hidden' value="+fila+" name=filas>");
document.write ("<input type='submit' value='Continuar'>");
document.write ("</form>");
}
</script>
</head>
<body>
<h1> Crear tablas </h1>
<form>
¿Cuantas Filas?: <input type="text" value=5 name=reng> <br>
¿Cuantas Columnas?: <input type="text" value=5 name=cols> <br>
<button onclick="creartabla(reng.value,cols.value)" name="tabla"> Crear tabla </button> <br><br>
</form>
</body>
</html>


Y ESTE ES EL CODIGO DE LA PAGINA LLAMADA "GENTABLA.PHP"
-------------------------------------------------------------------------
<?php
$filas = $_POST["filas"];
$columnas = $_POST["columnas"];
$titulos = array($columnas);
for ($t=0; $t<$columnas; $t++)
{
$nombretitu="titu".$t; // no olvidar que . es concatenar
$titulos[$t]=$_POST[$nombretitu];
}
echo "<h2> Tabla creada, $columnas columnas x $filas filas </h2>";
echo "<table border=1 cellspacing=1 cellpadding=1> <tr>";
for ($t=0; $t<$columnas; $t++)
{
if ($titulos[$t]=='')
echo "<td width=100 height=20 bgcolor='yellow'> _ </td>";
else
echo "<td width=100 height=20 bgcolor='yellow'> $titulos[$t] </td>";
}
echo "</tr>";
for ($x=0; $x<$filas-1; $x++)
{
echo "<tr>";
for ($y=0; $y<$columnas; $y++)
{
echo "<td width=100 height=20 > _ </td>";
}
echo "</tr>";
}
echo "</table>";
?>


ESPERO QUE LES PUEDA SERVIR DE ALGO.
UN SALUDO Y HASTA LUEGO. ;)

Crishtian
26 de Agosto del 2005
A PROPOSITO SE ME OLVIDABA, EL CODIGO ANTERIOR SOLO FUNCIONA EN EL EXPLORER, CON NETSCAPE NO DA.

; )
----------
* Yo también apoyo el software libre.

Kim
26 de Agosto del 2005
Saludos,

yo tambien estoy haciendo algo parecido a lo que explican acá arriba, tengo un documento con una tabla y quiero modificar solamente el contenido de una celda, insertando un arreglo que creo a apartir de variables que recibo de otro documento. El problema es que cuando trato escribir en la celda o indica un error por falta de objeto o sobreescribe todo el documento y no solamente lo que quiero.

Espero que alguien me pueda ayudar...., gracias

David
26 de Agosto del 2005
Veo que el tema está algo olvidado, aunque ya consigo trabajar con 40 tablas a la vez. Cuestión de copiar, pegar y cambiar nombres. Un poco coñazo y algo largo de código, pero funciona al fin y al cabo.

Luego editar y modificar es posible. Ahora bien, me queda una duda con la creación, porque pretendo hacer una cosilla para facilitar aún más todo este asunto. Para los que hayan seguido este topic, especialmente Jorge, que me ha ayudado lo que no se imagina, hay una serie de funciones que sirven para crear y editar filas y su contenido. Mi intención es, basándome en uno de los últimos códigos que pegué, que al darle al botón "Guardar" me haga lo siguiente: que me genere el array (sin problema), que me genere la tabla y su código (sin problema, salvo por una cosa que ahora comento) y que me genere las funciones que he usado para crear la tabla. Es decir, que con un document.write genere todo eso. Mi problema, y ahora viene lo importante, es el siguiente. Quiero insertar un campo de texto para introducir a mano el nombre de la tabla, de tal forma que, cuando le dé a "Guardar" me genere el array, la tabla y su código (con el nombre que he metido a mano) y todas las funciones incluyendo el nombre de la tabla. Algo así como...

function regenerateTableCar(){
while (objTableCar.rows.length>1) objTableCar.deleteRow(1);
for (row=0;row<tableCar.length;row++) {
var objRow = objTableCar.insertRow();
var objCell;
for (col=0;col<tableCar[row].length;col++) {
objCell = objRow.insertCell();
objCell.innerText = tableCar [row][col];
}
objCell = objRow.insertCell();
objCell.innerHTML = '<center><img src="edit.gif" onClick="editCar('+row+');" alt="modificar fila">';
}
}

Si yo pongo en ese campo de texto la palabra Car, esa palabra irá colocada de esa forma. Quiero recoger el valor de ese campo de texto y luego escribirlo con un document.write allí donde lo necesite.

No sé si se entiende lo que pretendo...

He probado con document.write("function regenerateTable" + tablename.value + "(){"); pero no funciona. ¿Alguien sabe cómo se hace bien? Muchas gracias.

David
26 de Agosto del 2005
Bueno, he seguido haciendo cosas, aunque más bien pijadillas para facilitar el trabajo al máximo y escribir lo menos posible. Pero tengo un gran problema, o mejor dicho, dos grandes problemas. Lo primero es, como comentaba fangosto, que trabaje bajo cualquier navegador, aunque prefiero que sea principalmente con el IE porque es el más extendido. Lo segundo, y más importante, es poder trabajar con todos los arrays a la vez. Yo ahora mismo trabajo con un solo array, y cada vez que quiero modificar uno, tengo que andar copiando y pegando.

Con el código que puso Jorge en su día, la verdad es que bastante bueno, lo ideal es que coja tantos arrays como haya dentro de ese mismo código o bien dentro de un fichero js que podamos importar usando javascript. Visualmente, tendríamos arriba del todo el formulario y debajo no una tabla, sino X tablas, tantas como arrays hayamos metido.

¿Es algo posible? Imagino que sí, pero a mí no se me ocurre cómo. Con éso y una posible solución a los navegadores, tendríamos un creador y editor de tablas bastante majo. Muchas gracias a todos.

David
26 de Agosto del 2005
Pego el código con lo hecho hasta ahora:

<html>
<head>
<title>Crear y editar tablas con JS</title>
<script type="text/javascript" language="javascript1.2">

var tableContent = new Array (0)

function regenerateTable(){
while (objTable.rows.length>1) objTable.deleteRow(1);
for (row=0;row<tableContent.length;row++) {
var objRow = objTable.insertRow();
var objCell;
for (col=0;col<tableContent[row].length;col++) {
objCell = objRow.insertCell();
objCell.innerText = tableContent [row][col];
}
objCell = objRow.insertCell();
objCell.innerHTML = '<center><img src="edit.gif" onClick="edit('+row+');" alt="modificar fila">';
}
}

function edit(rowIdx){
with (document.frm){
field.value = tableContent[rowIdx][0];
type.value = tableContent[rowIdx][1];
utility.value = tableContent[rowIdx][2];
values.value = tableContent[rowIdx][3];
rowIndex.value = rowIdx;
field.focus();
addBtn.style.display = "none";
saveBtn.style.display = "";
removeBtn.disabled = false;
}
}

function add(){
with (document.frm){
tableContent.push(new Array(field.value,type.value,utility.value,values.value));
reset();
field.focus();
}
regenerateTable();
}

function save(){
with (document.frm){
tableContent[rowIndex.value] = new Array(field.value,type.value,utility.value,values.value);
}
regenerateTable();
}

function remove(){
with (document.frm){
for (row=eval(rowIndex.value);row<tableContent.length-1;row++){
tableContent[eval(row)] = tableContent[eval(row+1)];
}
tableContent.pop();
reset();
field.focus();
addBtn.style.display = "";
saveBtn.style.display = "none"
removeBtn.disabled = true;
}
regenerateTable();
}

function clearForm(){
with (document.frm){
reset();
field.focus();
addBtn.style.display = "";
saveBtn.style.display = "none";
removeBtn.disabled = true;
}
}

function guardar(){
document.write("<a name=""></a>");
document.write("<font size="+1"><b>Tabla</b></font></p><br><br>" + "n");
document.write("<center><table border="1" cols="4" width="87%" bgcolor="#ffffcc">" + "n");
document.write("<tr bgcolor="#ffcccc">" + "n" + "t" + "<td><center><b>Fields</b></center></td>" + "n" + "t" + "<td><center><b>Type</b></center></td>" + "n" + "t" + "<td><center><b>Utility</b></center></td>" + "n" + "t" + "<td><center><b>Values</b></center></td>" + "n" + "</tr>" + "n");
for (i=0;i<tableContent.length;i++){
document.write("<tr>" + "n");
for (j=0;j<tableContent[i].length;j++){
document.write("t" + "<td>" + tableContent[i][j] + "</td>" + "n");
}
document.write("</tr>" + "n");
}
document.write("</table></center><br><br>");
}

function guardararray(){
document.write("table=" + "n");
for (i=0;i<tableContent.length;i++){}
document.write("var tableContent = new Array (" + i + ")" + "n");
for (i=0;i<tableContent.length;i++){
document.write("tableContent[" + i + "] = new Array(");
for (j=0;j<tableContent[i].length;j++){
document.write(""" + tableContent[i][j] + """);
if(j==0||j==1||j==2){
document.write(",");
}
}
document.write(");" + "n");
}
}

function checkEnterKey(){
if (60 == window.event.keyCode){
document.frm.values.value += "<BR>";
}
return false;
}

function checkEnterKey1(){
if (window.event.keyCode==86 || window.event.keyCode==118) {
document.frm.type.value += "varchar()";
return false;
}
else if (window.event.keyCode==70 || window.event.keyCode==102){
document.frm.type.value += "float";
return false;
}
else if (window.event.keyCode==73 || window.event.keyCode==105){
document.frm.type.value += "int";
return false;
}
}

function cambiotexto(){
document.frm.field.value= document.frm.field.value.bold();
}

function cambiolink(){
document.frm.utility.value= "&lt;A HREF=&gt;" +document.frm.utility.value;
}

function cambiolink2(){
document.frm.utility.value= document.frm.utility.value+ "&lt;/A&gt;";
}

function cambiolink3(){
document.frm.values.value= "&lt;A HREF=&gt;" +document.frm.values.value;
}

function cambiolink4(){
document.frm.values.value= document.frm.values.value+ "&lt;/A&gt;";
}

function varchar(){
document.frm.type.value= "varchar()";
}

</script>
<head>
<body text="#000000" bgcolor="#abffed" link="#0000ff" vlink="#ff0000" alink="#000088" onload="regenerateTable();">
<h3>Crear y editar tablas con JS<hr></h3>
<form name="frm" method="POST" action="#">
<table>
<tr><td><b>Fields</b></td><td><input type="text" name="field"><br></td><td><input type="button" value="Negrita" onclick="cambiotexto()"></td></tr>
<tr><td><b>Type</b></td><td><input type="text" name="type" onKeyPress="return checkEnterKey1();"><br></td></tr>
<tr><td><b>Utility</b></td><td><input type="text" name="utility"><br></td><td><input type="button" value="Apertura" onclick="cambiolink()"></td><td><input type="button" value="Cierre" onclick="cambiolink2()"></td></tr>
<tr><td><b>Values</b></td><td><textarea name="values" rows="8" cols="40" onKeyPress="return checkEnterKey();"></textarea><br></td><td><input type="button" value="Apertura" onclick="cambiolink3()"></td><td><input type="button" value="Cierre" onclick="cambiolink4()"></td></tr>
</table>
<input type="hidden" name="rowIndex"><br>
<p><br></p>
<input type="button" name="addBtn" value="Añadir" onClick="add();">
<input type="button" name="saveBtn" value="Guardar" onClick="save();" style="display:none">
<input type="button" name="removeBtn" value="Eliminar" onClick="remove();" disabled>
<input type="button" name="clearBtn" value="Limpiar" onClick="clearForm();">
</form>
<hr>
<input type="button" name="addBtn" value="Generar tabla" onClick="guardar();"> <input type="button" name="addBtn1" value="Generar array" onClick="guardararray();"><br><br>
<table id="objTable" bgcolor="#ffffcc" width="87%" border="1">
<tr bgcolor="#ffcccc">
<th>Fields</th>
<th>Type</th>
<th>Utility</th>
<th>Values</th>
<th>Edit</th>
</tr>
</table>
</body>
</html>

David
26 de Agosto del 2005
Bueno, sí se me ocurre... Multiplicando el código tantas veces como tablas haya, pero eso puede ser un infierno y algo muy poco práctico... Seguro que hay alguna manera mejor, ¿verdad?

Jorge
26 de Agosto del 2005
Tiene que haberla, ¡¡por Dios!! ;-p

Dame unos dias.

fangosto
26 de Agosto del 2005
Hola Genios!
Me meto otra vez en medio.
Este fin de semana subí la simulación de la orden innerText a este foro, de forma que se pueda simular para que funcione en cualquier navegador. Lo malo es que no sé como localizar lo que pongo en este foro.

Si no lo encontráis, también lo he subido al foro de mi página (http://fangosto.en.eresmas.com)

En breves días subiré el calendario que estoy haciendome para la página. En el manejo dinámicamnete el contenido de las 12 tabls correspondientes a cada mes. No sé...igual os sirve para lo que buscáis.

Os sigo!!!!!

Jorge
26 de Agosto del 2005
Discrepo en lo de que el tema este un tanto olvidado.

Sigo en ello. Pero aun no he logrado ningun avance que mereciera la pena publicar.

De todos modos te comento estoy trabajando en hacer que los datos iniciales de las tablas esten almacenados en archivos externos en lugar del propio archivo html. Un poco siguiendo tu idea de definir los arrays de datos en archivos *.js, pero estoy buscando algun modo de aligerar aun mas la tarea de escribir/crear esos archivos.

Por otra parte tambien ando tratando de encontrar el modo de hacer el archivo html sea lo mas pequeño posible, pero que sea lo bastante flexible como para poder trabajar con un numero indefinido de tablas.
La idea general es tener un unico formulario para editar las tablas y una unica tabla. Luego algun tipo de selector, posiblemente un combobox para permitir al usuario elegir con que tabla trabaja en cada momento.

Mas los correspondientes botones de importar datos, exportar datos, generar tabla, etc....


En cuanto a tu pregunta concreta de por que no funciona document.write("function regenerateTable" + tablename.value + "(){"); pues es dificil sin saber donde lo has puesto, como y donde esta definido "tablename", y tal... pero aventuraria que te falta por especificar el nombre del formulario donde se encuentra el campo de texto "tablename"...

David
26 de Agosto del 2005
Te explico brevemente ese problemilla. Es curioso porque a veces funciona y a veces no. He creado un input type="text" con nombre tablename, dentro de un formulario con nombre frm. Es curioso, porque tengo un document.write("var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n"); que me funciona, pero si lo pongo en otros sitios, no. Con esa línea de código, consigo que la declaración del array lleve el nombre de la tabla que yo he metido a mano, pero nada más. Porque si luego trato de poner document.frm.tablename.value en otro document.write no funciona. Seguiré haciendo pruebas, pero es algo raro.

Yo de momento me manejo con tanto código, aunque sé que no es lo más práctico. De todas formas, quien va a usar ésto no va a ver el código para nada.

Sigo con ello. Un saludo ;)

Dave
26 de Agosto del 2005
Hola, este post, me ha venido genial pero creo que lo que quiero hacer es inviable.

Porque necesito que un usuario administrador tenga un documento web como este que habeis hecho para que pueda crear nuevas filas en la tabla. El problema es que creo que con Javascript es imposible guardar despues el html con la tabla resultante, es decir que el administrador use el documento que habeis creado a modo de editor y despues guarde el resultado en otro documento htm que será el que se cuelgue en la intranet.

Esto no es posible usando solo Javascript no?

Muchas gracias

Dave
26 de Agosto del 2005
Hola, este post, me ha venido genial pero creo que lo que quiero hacer es inviable.

Porque necesito que un usuario administrador tenga un documento web como este que habeis hecho para que pueda crear nuevas filas en la tabla. El problema es que creo que con Javascript es imposible guardar despues el html con la tabla resultante, es decir que el administrador use el documento que habeis creado a modo de editor y despues guarde el resultado en otro documento htm que será el que se cuelgue en la intranet.

Esto no es posible usando solo Javascript no?

Muchas gracias

Jorge
26 de Agosto del 2005
Estoy trabajando en ello. Posiblemente lo tendre en un par de dias.
Si lo consigo ya les contare.

fangosto
26 de Agosto del 2005
David, yo también estoy interesado en ello. Así que pido ayuda también. Por si te sirve estoy intentado crear un calendario como el de Outloock pero sin usar un Activex, ni nada parecido, de esa forma quiero aprender a controlar tablas.

Jorge
26 de Agosto del 2005
Creo que ya se cual es el problema con document.write("var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n");

Aparentemente estas "escribiendo" en el mismo documento del que extraes la informacion. Es mas que posible que machaques el formulario con las nuevas lineas de codigo que estas creando... Eso explicaria que segun donde pongas lineas de ese estilo funcione o no.

Yo, de mano, intentaria otro estilo de hacer las cosas pero, si quieres seguir por esa via prueba una de estas dos alternativas:

a) En lugar de escribir el contenido del documento con sucesivos "write", crea una variable donde vas almacenando lo que quieres escribir (eso no altera aun el contenido del documento) y haz al final un unico write pasando esa variable como parametro. No se si me explico, seria algo como en lugar de hacer
document.write("var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n");
document.write("table [1] =" + document.frm.tablevalue1.value + ";n");
document.write("table [2] =" + document.frm.tablevalue2.value + ";n");
hacer
var htmlCode = "var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n";
htmlCode += "table [1] =" + document.frm.tablevalue1.value + ";n";
htmlCode += "table [2] =" + document.frm.tablevalue2.value + ";n";
document.write(htmlCode);

b) Realizar la escritura sobre otro documento distinto del que usas como fuente. Esto es, lo mas facil posiblemente abriendo otra ventana del navegador.
El codigo seria algo asi.

var otherWindow = window.open();
otherWindow.document.open();
otherWindow.write("var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n");
otherWindow.document.write("table [1] =" + document.frm.tablevalue1.value + ";n");
otherWindow.document.write("table [2] =" + document.frm.tablevalue2.value + ";n");
otherWindow.document.close();

o bien

var htmlCode = "var table" + document.frm.tablename.value + "= new Array (" + i + ")" + "n";
htmlCode += "table [1] =" + document.frm.tablevalue1.value + ";n";
htmlCode += "table [2] =" + document.frm.tablevalue2.value + ";n";
otherWindow.document.open();
otherWindow.document.write(htmlCode);
otherWindow.document.close();


SEGUIMOS con ello (no te quieras apropiar el merito). ;-p

Saludos :-D