Creación y edición de tablas con JS

Estoy intentando hacer algo complejo pero que necesito. Explicado de una manera sencilla, supone partir de un html con una serie de tablas ya creadas y, a partir de ahí, poder crear tablas nuevas o poder editar las tablas ya existentes, todo éso usando JS. Si quieres y puedes ayudarme, te envío lo que tengo hecho hasta ahora, porque tampoco quiero que pierdas tiempo con ésto. Hasta ahora, consigo crear y modificar tablas de manera individual, aunque con algún fallo que otro. Bueno.

2 respuestas

Respuesta
1
No me cierro a ayudarte, enviame lo que tengas, que puedo echarle un vistazo.
¿Qué usas? ¿DOM? ¿InnerHTML?
<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("<html><body><font size=\"+1\"><b>Tabla</b></font></p><br><br>")
document.write("<center><table border=\"1\" cols=\"4\" width=\"87%\" bgcolor=\"#ffffcc\">")
document.write("<tr bgcolor=\"#ffcccc\"><td><center><b>Fields</b></center></td><td><center><b>Type</b></center></td><td><center><b>Utility</b></center></td><td><center><b>Values</b></center></td></tr>")
for (i=0;i<tableContent.length;i++){
document.write("<tr>")
for (j=0;j<tableContent.length;j++){
document.write("<td>" + tableContent[j] + "</td>")
}
document.write("</tr>")
}
document.write("</table></center><br><br></body></html>")
}
function checkEnterKey() {
if (13 == window.event.keyCode)
document.frm.values.value += "<br>";
}
function cambiotexto(){
document.frm.field.value= document.frm.field.value.bold();
}
</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"><br></td></tr>
<tr><td><b>Utility</b></td><td><input type="text" name="utility"><br></td></tr>
<tr><td><b>Values</b></td><td><textarea name="values" onKeyPress="checkEnterKey();"></textarea><br></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();"><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>
Esto es lo que tengo hasta ahora. Comentarte que me han ayudado bastante porque apenas sé nada de JS, pero me han pedido que haga ésto y espero lograrlo. Con ese código soy capaz de crear el código de una tabla y modificar el contenido de la misma antes de generar el código.
Lo que ahora pretendo es partir de un html con POR tablas, todas con la misma configuración, 4 columnas y un número variable de filas. Querría crear tablas e incorporarlas al html y poder modificar esas tablas y guardar los cambios.
Si me dices que es bastante complicado, pensaré en otras opciones. De todas formas, muchas gracias por la ayuda.
He estado buscando en google, y poniendo table maker javascript source aparecen cosas que pueden ser útiles. Por ejemplo, http://javascript.internet.com/miscellaneous/table-maker-source.html
A lo mejor puede servir :))
Es un código curioso, bien pensado...
¿Entiendo qué lo que queda es la opción de editar?
A ver si puedo echarle un ojo tranquilo y te digo algo, ¿de acuerdo?
Confírmame que lo que quieres es hacer la opción de editar, ¿vale?
DOM es más standard, y va muy bien, pero puede ser un poco pesado, porque tienes que ir creando todos los elementos:
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.appendChild(td);
table.appendChild(tr);
Etc...
Pero eso si, a la hora de editar es mucho mejor, porque puedes acceder a las celdas directamente...
Oye, si vas a cambiar a DOM, ¿puedes finalizarme esta pregunta y si encuentras alguna pega me la comentas de nuevas?
Acabo de leer que estas cosas es mejor con DOM... Me voy a poner a mirar, a ver qué encuentro, porque yo pensé que éso existía solo para XML. A lo mejor se puede orientar mejor en ese sentido. Voy a ponerme a buscar.
Buenos días.
Reconozco que me han ayudado para llegar hasta ahí, pero bueno, de momento es lo que hay.
Me quedaría la opción editar una vez la tabla ha sido creada, porque mientras añado filas, yo puedo editar su contenido, pero una vez doy al botón generar tabla ya no tengo esa opción. Pero no sé muy bien cómo podría hacer eso si en el documento html hay, por ejemplo, 40 tablas y yo quiero editar una concreta. Se me ocurrió que, si al crear la tabla, le crease el atributo id y luego llamase a la tabla por el nombre del atributo, podría editar la tabla que yo quisiese. No sé si eso es posible o no.
En cuanto a la creación, lo que me pasa ahora es que creo una tabla y ya está, y lo que yo querría es aumentar el número de tablas del html. Ahora mismo anda por las 40, ya te digo, y lo ideal sería crear una tabla y que tuviese 41 sin tener que estar yo copiando y pegando el código de la tabla nueva.
Sé que debe ser complicado, yo ahora mismo estoy en un punto muerto. Ojalá puedas ayudarme. Si tienes cualquier duda, no dudes en ponerlo. Muchas gracias. Un saludo.
De momento prefiero intentar terminar del otro modo, siempre y cuando sea posible. Si no hay manera y hay que intentarlo com DOM, pues se va por ahí. Pero ya te digo, que si me puedes ayudar con eso bien, y si no, pues tampoco pasa nada, que bastante me parece con que me dediques parte de tu tiempo en ayudarme.
Una vez más, muchas gracias. Un saludo.
Buenos días.
Realmente no da ningún error, pero le falta funcionalidad. Yo creo que tengo dos opciones:
1- Meter los datos de las tablas en arrays, en un fichero aparte, editar ese fichero y modificar los arrays (quizás sea lo más sencillo, pero supone pasar el contenido de más de 40 tablas muy largas a otros tantos arrays).
Imagina que tengo un fichero arrays.js que contiene las tablas pero en arrays, sin código html, algo así:
var tableContent = new Array (3)
tableContent[0] = new Array("","","","");
tableContent[1] = new Array("","integer","","");
tableContent[2] = new Array("","","","");
Entre paréntesis iría el contenido de cada tabla y tendría, igual que éste, el resto de las tablas. Tendría unos 40 arrays en el js. Si con un script pudiese abrir ese fichero js, buscar por el nombre de la tabla y editar el contenido del array para luego guardarlo, luego tendría que copiar ese array en el código que tengo hecho y generar la tabla, sin más.
2- Trabajar directamente con las tablas, editando su contenido y guardando los cambios, sin usar arrays.
Cojo el fichero html con las 40 tablas, cada tabla con su id, llamo a la tabla por la id, la modifico y guardo los cambios. Si quiero crear, con el código que tengo hecho me bastaría.
En mi opinión, esas son las dos opciones que tengo ahora mismo para trabajar las tablas. Lo que no sé es qué puede ser más sencillo. Posiblemente sea mejor trabajar con los arrays a pesar de que me toque pasar las tablas a arrays. ¿Qué opinas? No sé si me estoy explicando bien o si me estoy complicando mucho.
Espero tu respuesta. Muchas gracias de nuevo. Un saludo.
Buenos días de nuevo.
No sé si puede ser una ventaja o no, pero no habría trabajo cliente-servidor. Se haría todo en local. Lo que se pretende es trabajar con esas tablas sin usar un editor (Dreamwaever, por ejemplo) y sin tener que buscar en el código, porque son más de 6.000 líneas de html. ¿Soluciona eso el problema de guardar en el js?
Un saludo.
Bueno, he conseguido lo que pretendía salvo por un error. He añadido un botón Generar array, que llama a la siguiente función:
function guardararray(){
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.length;j++){
document.write("\"" + tableContent[j] + "\",");
}
document.write(");" + "\n");
}
}
De esta forma, se crea en el IE los arrays, pero lo útil viene cuando le doy a ver código, puesto que me queda
var tableContent = new Array (3) etc. Igual que en el archivo js salvo una importante excepción.
document.write("\"" + tableContent[j] + "\",");
Esa coma que meto al final es necesaria para que el array se cree realmente, para que distinga unas columnas de otras. El problema es que pone una coma de más:
tableContent[5] = new Array("name","varchar(100)","Wine name","<br>",);
¿Cómo hago para quitar la última coma? Si hago éso, me olvido de hacer cosas más complicadas y lo dejo como está.
Siento ser tan pesado, pero me queda nada para terminar. Un saludo.
Uf!, con tanta pregunta no se seguirte...
JavaScript no va a escribir ficheros a menos que puedas usar controles activeX (explorer con windows), si no, lo veo muy crudo... Puedes mirar en google, que hay muchas cosas ya hechas.
Y por lo demás no se, si tienes alguna pega dímelo y tratare de ayudar.
Ahora, si no te importa, finalizame la pregunta para que no se me quede conlgando por ahí, ¿vale? Después puedes abrirme una pregunta nueva.
Ok, ya entiendo, la cosa es poder editar tablas que ya se hayan guardado, ¿no? Pero claro, javascript no esta preparado para la "persistencia", no es lo suyo... Supongo que lo ideal seria enganchar con un lenguaje de servidor que te guarde las tablas en una base de datos o un fichero... y que luego puedas leerlo y "convertirlo" a javascript...
Es un poco lio, pero bueno... es lo más parecido a lo que dices en la opción 1. Porque sabes que con javascript no vas a poder escribir el fichero js en el servidor, ¿no? Es decir, en tu idea 1, ¿cómo vas a guardar las cosas en el .js?
Yo crearía un formulario dinámico con todas las variables de javascript implicadas en las tablas (no cuando se ve la tabla hecha, sino cuando se esta creado, que es cuando se puede editar con lo que ya esta hecho) y al dar a "guardar", que te crea la tabla ya, que ademas envíe el formulario a algún jsp o php o lo que uses y que lo meta en el .js...
Claro que luego también esta el tema de saber que has editado, que has borrado y que has añadido... de modo que tal vez lo mejor sea crear el .js cada vez, para hacerlo más sencillo...
En fin, no se si te ayuda mucho...
He mirado y probado el código y he visto que funciona perfectamente...
Si añado nuevas filas va todo correcto. Y si le doy al botón de editar, los valores correspondientes se colocan en el formulario y con el botón modificar va todo bien...
Lo he probado en explorer para windows...
¿Qué error te da exactamente?
Se me ocurre que, siguiendo un poco con lo hecho hasta ahora, puedo facilitar más las cosas del siguiente modo.
En el fichero js tengo todas las tablas en arrays, como te decía antes. Cuando yo quiera editar el contenido de un array, busco el que quiero con el editor de texto que estoy usando y copio y pego ese array en el fichero donde tengo el script. De esa forma, en vez de poner var tableContent = new Array (0) pondría var tableContent = new Array (24) y a continuación cada fila con su contenido. Así, el fichero html con el script, el que has probado antes, aparecería con el formulario y justo debajo la tabla y su contenido, listo para editar y generar la tabla. Yo puedo modificar la tabla y luego generar una nueva. Eso tan solo me permitiría generar código html, útil para el fichero html que contiene todas las tablas (copiar y pegar es lo más sencillo), pero no modificaría los arrays. Ahora bien, del mismo modo que genera el código html con las modificaciones, podría hacer que generase el array aparte, con la misma estructura, copio el resultado, lo pego en el js encima del anterior array y lo sustituyo.
Sé que puede parecer algo chapucero, pero es que como quiera algo mejor, uso directamente Dreamweaver :P
¿Qué opinas? ¿Entiendes todo lo que he puesto? Espero que sí. Si no, pregúntame. Un saludo.
Problema resuelto. He puesto un if que ponga la coma en el caso de que j sea igual a 0,1 y 2, que representan las 3 primeras columnas. No sé, creo que de momento está casi acabado salvo que me surjan nuevas dudas o nuevos problemas.
Muchas gracias por la ayuda. Un saludo.
Realmente usaré mucho copiar y pegar una vez haya modificado las cosas, al menos de momento. Al menos ahora mismo puedo crear y editar de un modo más sencillo. Pero veré como se podría hacer de una mejor manera con activeX o de alguna otra forma.
Muchas gracias por leerme y por las ideas dadas. Un saludo.
Respuesta

¿Amigo ya terminaste tu trabajo? No me podrías pasar el código que hiciste para GENERAR LA TABLA al apretar el botón

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas