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?