Estimado JavierB, he modificado en base a tu observacion y naranja. La verdad, no se que pasa.
<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 (document.getElementById('objTable').rows.length>1 ) document.getElementById('objTable').deleteRow(1);
for (row=0;row<tableContent.length;row++) {
var objRow = document.getElementById('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>2
<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>