Foros del Web » Programando para Internet » Javascript »

Agregado de celdas no funciona en Mozilla

 Estas en el tema de Agregado de celdas no funciona en Mozilla en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/10/2005, 06:58
 
Fecha de Ingreso: abril-2005
Mensajes: 110
Antigüedad: 19 años
Puntos: 0
Agregado de celdas no funciona en Mozilla
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>
  #2 (permalink)  
Antiguo 26/10/2005, 07:20
 
Fecha de Ingreso: agosto-2005
Ubicación: Mérida, Venezuela
Mensajes: 732
Antigüedad: 18 años, 8 meses
Puntos: 7
amigo... yo no soy el que más domina js, de hecho, creo que soy el que menos lo domina... ¿podrías explicar qué es lo que quieres hacer?
__________________
Gracias de todas todas
-----
Linux!
  #3 (permalink)  
Antiguo 26/10/2005, 07:55
 
Fecha de Ingreso: abril-2005
Mensajes: 110
Antigüedad: 19 años
Puntos: 0
Estimado CACR.... lo que quiero hacer es que frente a un evento, por ej. presionar un boton, se agregue un renglon de celdas al final de una tabla.
En el codigo qeu he "pegado" en el post, hay una tabla con cuatro campos, y al presionar el boton Añadir, se agrega un <tr> con las cuatros celdas para seguir agregando datos. El tema es qeu en IE funciona joya, pero en Mozilla ni se entera.
  #4 (permalink)  
Antiguo 26/10/2005, 08:02
 
Fecha de Ingreso: agosto-2005
Ubicación: Mérida, Venezuela
Mensajes: 732
Antigüedad: 18 años, 8 meses
Puntos: 7
y las celdas que se agregan son por necesidad del usaurio o de alguna BD???
__________________
Gracias de todas todas
-----
Linux!
  #5 (permalink)  
Antiguo 26/10/2005, 08:18
 
Fecha de Ingreso: abril-2005
Mensajes: 110
Antigüedad: 19 años
Puntos: 0
Por necesidad del usuario, la idea es que el usuario agregue celdas segun su necesidad, por eso en el ejemplo, la creacion de las celdas nuevas esta asociado al boton.
Copia el codigo a un archivo de texto para crear la paginma y veras mas claramente lo qeu estoy plantenado, por supuesto, tendrias que ver la pagina con IE y mozilla.
  #6 (permalink)  
Antiguo 26/10/2005, 08:33
 
Fecha de Ingreso: agosto-2005
Ubicación: Mérida, Venezuela
Mensajes: 732
Antigüedad: 18 años, 8 meses
Puntos: 7
fíjate... si no funciona en un navegador, es posible que sea problerma de estandares, o sea, deberías cambiar el código...

Yo tengo algo parecido, en una inserción de encuestas... pregunto cuantas opciones va a tener de respuestas, y de ahí saco las celdas...

Quizás, si le das la vuelta a tu "esquema"...
__________________
Gracias de todas todas
-----
Linux!
  #7 (permalink)  
Antiguo 26/10/2005, 08:34
Avatar de JavierB
Colaborador
  
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Hola pedrito

En Firefox no puedes usar esto: objTable.rows.length>1

Tienes que usar: document.getElementById('objTable').rows.length>1

Cambialo en tu código a ver que tal.

Saludos,
  #8 (permalink)  
Antiguo 26/10/2005, 08:49
 
Fecha de Ingreso: abril-2005
Mensajes: 110
Antigüedad: 19 años
Puntos: 0
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>
  #9 (permalink)  
Antiguo 26/10/2005, 09:08
 
Fecha de Ingreso: agosto-2005
Ubicación: Mérida, Venezuela
Mensajes: 732
Antigüedad: 18 años, 8 meses
Puntos: 7
mmm, fuera de los estandares...
__________________
Gracias de todas todas
-----
Linux!
  #10 (permalink)  
Antiguo 07/05/2008, 11:39
 
Fecha de Ingreso: mayo-2008
Mensajes: 1
Antigüedad: 15 años, 11 meses
Puntos: 0
solucionado :Agregado de celdas no funciona en Mozilla
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">
<!--
// PRELOADING IMAGES
if (document.images) {
img_on =new Image(); img_on.src ="images/edit.gif";
img_off=new Image(); img_off.src="images/edit.gif";
}

function handleOver() {
if (document.images) document.imgName.src=img_on.src;
}

function handleOut() {
if (document.images) document.imgName.src=img_off.src;
}

//-->
</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>
<!--
<H1>Ejemplo de procesado de formularios</H1>
El nombre que ha introducido por GET es: <?php echo $_GET['field']," ",$_GET['rowIndex2'] ?><br>
El nombre que ha introducido por POST es: <?php echo $_POST['rowIndex00']," ",$_POST['rowIndex10'] ?>
-->

<!--
pero mas facil hacer esto: añadiendo un div
<td width="100" align="center" valign="top"><a href="" onClick="form.lng.value='<?= $lng ?>'; form.location.value='rrhh/form1.inc'; form.oferta_id.value='<?= $o -> id() ?>'; form.submit(); return false;"><?= $image ?></a></td>
$oferta_id = $form -> request('oferta_id');


<input type="button" onclick="if (document.getElementById('titulacion2').style.disp lay=='block') {document.getElementById('titulacion2').style.disp lay='none'} else {document.getElementById('titulacion2').style.disp lay='block'};" value="+2" />
</div>
.............
<div style="display:none;" id="titulacion2">
<table class="container1">
.........
</table>
<input type="button" onclick="if (document.getElementById('titulacion3').style.disp lay=='block') {document.getElementById('titulacion3').style.disp lay='none'} else {document.getElementById('titulacion3').style.disp lay='block'};" value="+3" />
</div>
-->
</html>
  #11 (permalink)  
Antiguo 07/05/2008, 11:42
Avatar de JavierB
Colaborador
  
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Re: Agregado de celdas no funciona en Mozilla
El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:21.