Foro: El HTML siguiente, agrega un grupo de celdas debajo de las existenes a una tabla. Si bien funciona para el IE, no lo hace para el mozilla. He estado mirando los post anteriores, pero ninguno ha manejado el tema de celdas.
Gracias.
Código HTML:
<SCRIPT LANGUAGE='javascript' ></SCRIPT><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("1","1","1","1");
tableContent[1] = new Array("2","2","2","2");
tableContent[2] = new Array("3","3","3","3");
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="images/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 showCode() {
document.frm.tableCode.value = objTable.outerHTML;
}
</script>
<head>
<body onload="regenerateTable();">
<h3>Crear y editar tablas con JS<hr></h3>
<form name="frm">
<table width="675">
<tr>
<td>
<strong>Campo1</strong> <input type="text" name="field"><br>
<b>Campo2</b> <input type="text" name="type"><br>
<b>Campo3</b> <input type="text" name="utility"><br>
<strong>Campo4</strong> <input type="text" name="values"><br>
<td>
<td>
<textarea name="tableCode" readonly rows="6" cols="50">
</textarea>
</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();">
<input type="button" name="clearBtn" value="Ver código" onClick="showCode();">
</form>
<hr>
<table id="objTable" width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>campo 1</th>
<th>campo 2</th>
<th>campo 3</th>
<th>campo 4</th>
</tr>
</table>
</body>
</html>