Editar y crear tablas

[Ember]

Buenos días. He estado mirando en Google y en este foro cosas sobre edición y creación de tablas con Javascript, pero como no estoy seguro de haber encontrado algo útil, prefiero preguntar. Antes de nada, decir que estoy bastante verde en la materia. Lo que quiero hacer es, partiendo de un html con una serie de tablas, crear tablas nuevas o editar el contenido de las mismas para poder modificarlo. No sé si ésto es posible, aunque según tengo entendido, con un arraylist podría hacerse. Bueno, espero que alguien pueda ayudarme. Muchas gracias

[caricatos]

Hola Ember, bienvenido a los foros :

Fíjate en este otro mensaje: http://69.93.21.147/showthread.php?threadid=152620
Y un ejemplo en esta página: http://www.pepemolina.com/tablas/

Saludos

[Ember]

Muchas gracias por responder. He estado mirando el ejemplo que ponías en un topic anterior y parece de lo más interesante. Ahora tengo que ver si eso mismo podría adaptarlo a lo que ya tengo creado. Es un fichero que me han pasado con 6.500 líneas, tiene más de 20 tablas, están todas sin ningún tipo de identificación, etc. Cada tabla viene con 4 columnas y el número de filas varía según la tabla. Creo que voy a pedir que nuevamente me expliquen qué quieren exactamente. Dentro de poco volveré a preguntar, seguro

[caricatos]

Hola otra vez:

Si las tablas las puedes generar a partir de arrays de objetos, tal vez pueda serte útil esta página: http://www.pepemolina.com/arrays/index.html y la discusión sobre manipular arrays: http://www.forosdelweb.com/f13/manipular-array-247815/
Para pasar tablas de lenguajes como php a javascript, puede ser algo laborioso, pero posible.

Saludos

[Ember]

Lo que me han dicho es que cree un arraylist de 2 dimensiones, con los correspondientes elementos, y luego ponga
document.write('<TR><TD>' + elemento1[][] + '</TD><TD>' + elemento2 [2][3].....
Aún así, sigue sin quedarme claro cómo creo así una tabla, y sobre todo, cómo la modifico

[Ember]

Bueno, aunque sigo algo perdido, estoy viendo en internet que la clave del tema estaría en crear un array o matriz bidimensional. Eso creo que me permitiría crear la tabla y luego recorrerla con 2 bucles for. ¿Alguien podría decirme si voy por el buen camino? Muchas gracias.

[Ember]

Yo sigo con lo mío... Lo mejor que he conseguido es ésto:

var fila0 = new Array(4)
fila0[0] = "Hola"
fila0[1] = "Adios"
fila0[2] = "Si"
fila0[3] = "No"

var fila1 = new Array (4)
fila1[0] = "Puede"
fila1[1] = "Ser"
fila1[2] = "Ola"
fila1[3] = "Mola"

var fila2 = new Array (4)
fila2[0] = "Marca"
fila2[1] = "As"
fila2[2] = "Mundo"
fila2[3] = "Pais"

var tabla = new Array (3)
tabla[0] = fila0
tabla[1] = fila1
tabla[2] = fila2

document.write("<table width=400 border=1 cellpadding=1 cellspacing=1>");
for (i=0;i<tabla.length;i++){
document.write("<tr>")
for (j=0;j<tabla[i].length;j++){
document.write("<td>" + tabla[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table>")

Así creo una tabla en html con 4 columnas y 3 filas. De todas formas, me gustaría mejorar un poco lo presente... Así que cualquier ayuda seguirá siendo bienvenida.

[Ember]

Bueno, yo sigo con lo mío, aunque espero que alguien pueda ayudarme. Ya puedo crear tablas, pero no de una manera muy dinámica.

<SCRIPT LANGUAGE="JavaScript">
var fila0 = new Array(4)
fila0[0] = "Hola"
fila0[1] = "Adios"
fila0[2] = "Si"
fila0[3] = "No"

var fila1 = new Array (4)
fila1[0] = "Puede"
fila1[1] = "Ser"
fila1[2] = "Sola"
fila1[3] = "Mola"

var fila2 = new Array (4)
fila2[0] = "Marca"
fila2[1] = "As"
fila2[2] = "Mundo"
fila2[3] = "Pais"

var tabla = new Array (3)
tabla[0] = fila0
tabla[1] = fila1
tabla[2] = fila2

function guardar(){
document.write("<font size=\"+1\"><b>Tabla</font></b></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<tabla.length;i++){
document.write("<tr>")
for (j=0;j<tabla[i].length;j++){
document.write("<td>" + tabla[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table></center><br><br>")
}
</SCRIPT>
<input type="button" name="addBtn" value="Generar tabla" onClick="guardar();">

El problema de ésto es que los datos de la tabla los tengo que modificar en el código, y eso es un poco incómodo, y no hay forma de editar la tabla.

De este otro modo, puedo crear tablas, editarlas y demás, pero no me genera un código que yo pueda usar después:

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

var tableContent = new Array (3)
tableContent[0] = new Array("Hola","Adios","Si","No");
tableContent[1] = new Array("Puede","Ser","Sola","Mola");
tableContent[2] = new Array("Marca","As","Mundo","Pais");

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;
}
}

</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">
<table>
<tr><td><b>Fields</b></td><td><input type="text" name="field"><br></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"></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>
<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>

¿Alguien sabe cómo puedo combinar ambos códigos para crear tablas como en el segundo ejemplo pero que me generen un código como en el primer ejemplo?

[sqa212]

Iniciado por caricatos

Fíjate en este otro mensaje: http://69.93.21.147/showthread.php?threadid=152620
Y un ejemplo en esta página: http://www.pepemolina.com/tablas/

No funciona este link

[caricatos]

Iniciado por sqa212

No funciona este link

Hola:

Por reestructuración de mi sitio, puede que no funcionen algunos enlaces... pero éste ya lo arreglé.

Saludos

[programeitor]

Es que tienes dos matrices para un mismo fin, pero una la usas para cargar la tabla y la otra para las modificaciones.

con esto ya te funciona:


function guardar(){
tabla=tableContent



pero puedes utilizar un solo nombre desde el principio, o tabla o tableContent.


He observado que al darle a guardar desaparece el boton para añadir y no vuelve a aparecer.
Está muy bien el trabajo .