Insertar input's en Mozilla Firefox

fremeto · #1 (**permalink**) 15/08/2007, 14:49

Hola,

Tengo el siguiente código:

<script>
function CrearInput(tabla1)
{
var tabla = document.getElementById(tabla1);
var objRow = tabla.insertRow();
var objCell;

objCell = objRow.insertCell();
objCell.innerHTML = '<input name="evento[]" maxlength="50" type="text" id="evento[]" size="45"/>';

objCell = objRow.insertCell();
objCell.innerHTML = '<input name="lugar[]" maxlength="50" type="text" id="lugar[]" size="40"/>';

objCell = objRow.insertCell();
objCell.innerHTML = '<input name="hora[]" maxlength="20" type="text" id="hora[]" size="10"/>';

objCell = objRow.insertCell();
objCell.innerHTML = '<input name="fecha[]" maxlength="10" type="text" id="fecha[]" size="10"/>';

objCell = objRow.insertCell();
objCell.innerHTML = "<input type='button' name='Submit' value='x' onclick='borrar(this);'/>";

}

function borrar(objeto)
{
var nodo_del_row = objeto.parentNode.parentNode;

var index_del_row = nodo_del_row.rowIndex;

var nodo_de_tabla = nodo_del_row.parentNode;

x=objeto.parentNode.parentNode.parentNode;
x.deleteRow(index_del_row);
}

</script>

En él hay dos funciones las cuales crear y eliminan filas en una tabla, con diferentes input, con el código no tengo problemas porque funciona perfectamente en IE, el problema radica que no funciona en Mozilla, mi pregunta es: ¿Porque el código no funciona en este explorador? ¿Como puedo hacer para que funcione en cualquier explorador, partiendo del código que tengo? ¿Tengo que cambiar todo el código?

Gracias.

derkenuke · #2 (**permalink**) 15/08/2007, 18:31

He descubierto (y tú probablemente podrías haber leído el error en la consola de errores) que Firefox necesitaba argumentos en la línea de creación de la fila (insertRow()). Investigando llego a que el argumento que necesita es la posición en la que insertar la fila.

También he puesto los argumentos a insertCell(), y he invertido el orden de las celdas para siempre poner un 0 como argumento. Así se añaden de última a primera:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> P&#225;gina nueva </title>
<meta name="Author" content="derkeNuke">
<style type="text/css">
</style>
</head>

<body>


<table id="miTabla" border="1">
<tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
</tr>
<tr>
    <td>f</td>
    <td>g</td>
    <td>h</td>
    <td>i</td>
    <td>j</td>
</tr>
</table>

<script type="text/javascript">

function CrearInput(tabla1){
    var tabla = document.getElementById(tabla1);
    var filas = tabla.rows.length;
    var objRow = tabla.insertRow(filas);
    var objCell;

    objCell = objRow.insertCell(0);
    objCell.innerHTML = "<input type='button' name='Submit' value='x' onclick='borrar(this);'/>";

    objCell = objRow.insertCell(0);
    objCell.innerHTML = '<input name="fecha[]" maxlength="10" type="text" id="fecha[]" size="10"/>';


    objCell = objRow.insertCell(0);
    objCell.innerHTML = '<input name="hora[]" maxlength="20" type="text" id="hora[]" size="10"/>';

    objCell = objRow.insertCell(0);
    objCell.innerHTML = '<input name="lugar[]" maxlength="50" type="text" id="lugar[]" size="40"/>';

    objCell = objRow.insertCell(0);
    objCell.innerHTML = '<input name="evento[]" maxlength="50" type="text" id="evento[]" size="45"/>';

}


function borrar(objeto){
    var nodo_del_row = objeto.parentNode.parentNode;

    var index_del_row = nodo_del_row.rowIndex;

    var nodo_de_tabla = nodo_del_row.parentNode;

    x=objeto.parentNode.parentNode.parentNode;
    x.deleteRow(index_del_row);
}


window.onload = function() {
    document.onclick = function() {  CrearInput("miTabla");  }
}

</script>


</body>
</html>

Así me ha funcionado tanto en IE como en FF.

Un saludo.

fremeto · #3 (**permalink**) 17/08/2007, 11:43

Gracias por la respuesta, voy a probarlo.

fremeto · #4 (**permalink**) 25/08/2007, 17:54

Funcionó perfectamente, mil gracias!

derkenuke · #5 (**permalink**) 26/08/2007, 09:22

Una cosa que me he dado cuenta fremeto, tienes los mismos ids en varios campos diferentes, es algo que deberías solventar. En un mismo documento no pueden haber dos ids iguales.

Normalmente se suelen utilizar los names en vez de ids, pero como veo que tienes el name igual al id creo que deberías eliminar el atributo id.

Un saludo.