Foros del Web - Ver Mensaje Individual - Agregado de celdas no funciona en Mozilla

raulcasanova · #10 (**permalink**) 07/05/2008, 11:39

hola pedrito aqui te envio la respuesta, el codigo ya está adaptado por verse en mozilla
Saludos Raul
[email protected]

<title>Crear y editar tablas con JS</title>
<head>
<script language="JavaScript">

</script>

<script type="text/javascript" language="javascript1.2">

var tableContent = new Array (0) ;

function regenerateTable() {

var objTable = document.getElementById('objTable');
while (objTable.rows.length>1) objTable.deleteRow(1);

var lastRow = objTable.rows.length;
for (row=0;row<tableContent.length;row++) {
var objRow = objTable.insertRow(lastRow);
var objCell;

var campo;
var campo_sum;

for (col=0;col<tableContent[row].length;col++) {
//alert (col);

objCell = objRow.insertCell(col);

// row 0 numero del primer registro completo
// col 0 1 2 etc es el nro de campo
campo_sum = row + 1 ;

if (col == 0 ) {

if (row == 0 || row == 1 || row == 2 || row == 3) campo = 'edit[titulacion'+campo_sum+']';

}
else
campo = 'rowIndex'+row+col;

objCell.innerHTML = '<input type="text" readonly name="'+campo+'" value="'+tableContent [row][col]+'">';

}
objCell = objRow.insertCell(col);
//objCell.innerHTML = '<center><img src="images/edit.gif" onClick="edit('+row+');" alt="modificar fila">';

objCell.innerHTML = '<center> <a href="#any_URL" onMouseOver="handleOver();return true;" onMouseOut="handleOut();return true;" ><img name=imgName width=17 height=15 border=0 alt="This imagechanges when you point at it!" src="i/edit.gif" onClick="edit('+row+');" > </a>';
}
}

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.value = '';
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();
addtable.style.display = "";
addBtn.style.display = "";
saveBtn.style.display = "none"
removeBtn.disabled = true;
}
}

function showCode() {
var objTable = document.getElementById('objTable');
document.frm.rowIndex.value = objTable.innerHTML;
//document.write(document.frm.rowIndex.value);
alert (objTable.innerHTML);

}

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>")
}
</script>

</head>

<body >
<h3>Crear y editar tablas con JS<hr></h3>

<form action="tabla_procesa_datos.php" name="frm" method="post" format="html">
<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();">
<input type="button" value="Generar tabla" onClick="guardar();"><br><br>
<input type="submit" value="Submit" />

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