Problemas con innerHTML en IE

[JCMadrid]

Hola a todos,

estoy empezando en esto del JavaScript. Hasta ahora he programado algunas webs en PHP, pero me resultó interesante poder manipular la web con DOM sin pasar por el servidor.

Pero me surgio un problema de incompatibilidad de navegadores...Tal vez puedan decirme si es solucionable o deberia de cambiar de estrategia.

Vereis, Tengo un formulario de email-contraseña con un checkbox (Nuevo usuario) que al activarlo me debe de añadir una fila a la tabla que contiene mi FORM, justo debajo del campo contraseña y añadiendo otro campo (Repetir contraseña).

El caso es que he creado una función para esto con innerHTML, que funciona perfectamente en todos la mayoría de navegadores (Firefox, Opera, Safari, Chrome), pero me falla en IExplorer.

En el caso de IE es como si se crease la fila de la tabla pero no se añadiese el texto de innerHTML.

Código:

function AddInput(){
    
        var CHKLOG = document.getElementById("Nuevo");
        
        if (CHKLOG.checked){
            // Añade campo de confirmación
            var TABLOG = document.getElementById("TLogin");
            var ROWLOG = document.getElementById("RLogin");
        
	    var newRow = TABLOG.insertRow(5);
        
            var rowCod = "<TD align='right'>Repite la contraseña:</TD><TD><input type='password' name='vRPalabraPaso' value='' size='20'></TD><TD></TD>";
            
            alert(rowCod);            
            newRow.innerHTML = rowCod;
        
        } else {
        
            document.getElementById("TLogin").deleteRow(5);
        
        }
}

Código PHP:

  echo " 
<form method='POST' action='".SELF."' onSubmit='validarForm(this)' enctype='multipart/form-data'> 
<TABLE WIDTH='500' ID ='TLogin' HEIGHT = '180' align='center' background='" . PATHGIF . "tabla_aut.jpg'> 
    <TR> 
        <TD></TD> 
        <TD>&nbsp;</TD> 
        <TD></TD> 
    </TR> 
    <TR> 
        <TD><B>&nbsp;&nbsp; Acceso a la cuenta: </B></TD> 
        <TD></TD> 
        <TD></TD> 
    </TR>  
    <TR> 
        <TD colspan='3'><CENTER><SPAN id='alertas' class='alert'>&nbsp;</SPAN></CENTER></TD> 
    </TR>    
    <TR> 
        <TD align='right'>Email: </TD> 
        <TD> <input type='text' name='vEMail' value=\"".$_POST['vEMail']."\" size='20'> </TD> 
        <TD></TD> 
    </TR>       
    <TR id='RLogin'> 
        <TD align='right'>Contraseña: </TD> 
        <TD> <input type='password' name='vPalabraPaso' value=\"".$_POST['vPalabraPaso']."\" size='20'> </TD> 
        <TD></TD> 
    </TR>      
    <TR> 
        <TD align='right'> <input type='checkbox' id='Nuevo' name='Nuevo' onClick='AddInput()' value=\"Nuevo cliente\"></TD> 
        <TD> Nuevo cliente </TD> 
        <TD> <input type='submit' name='Op' value=\"Validar\"> </TD> 
    </TR> 
    <TR> 
        <TD></TD> 
        <TD>&nbsp;</TD> 
        <TD></TD> 
    </TR> 
</TABLE> 
</form>   
";  
   

Muchas gracias

[raul_romero]

Hola amigo, que raro que no hayas tenido problemas en los otros navegadores con está función.

Al probarla me salio error desconocido, pues bien no se trata del innerHTML sino que tenias que haber creado después de la fila (insertRow), las celdas con insertCell y recien alli podias usar innerHTML para agregar codigo en cada celda.

Agrega el codigo que esta en rojo y borra o comenta lo que esta en verde

function AddInput(){

var CHKLOG = document.getElementById("Nuevo");

if (CHKLOG.checked){
// Añade campo de confirmación
var TABLOG = document.getElementById("TLogin");
var ROWLOG = document.getElementById("RLogin");

var newRow = TABLOG.insertRow(5);
c1=newRow.insertCell(0);
c2=newRow.insertCell(1);
c3=newRow.insertCell(2);

c1.innerHTML="<TD align='right'>Repite la contraseña:</TD>";
c2.innerHTML="<TD><input type='password' name='vRPalabraPaso' value='' size='20'></TD>";
c3.innerHTML="<TD align='right'>&nbsp;</TD>";


/*var rowCod = "<TD align='right'>Repite la contraseña:</TD><TD><input type='password' name='vRPalabraPaso' value='' size='20'></TD><TD></TD>";

alert(rowCod);
newRow.innerHTML = rowCod;*/

} else {

document.getElementById("TLogin").deleteRow(5);

}
}


Espero te sirva...

Saludos...

[JCMadrid]

¡¡SOLUCIONADO!!

Muchas gracias Raul,

es mi primer post en este foro y me has ayudado bastante.

Haré lo correspondiente cuando aprenda un poquito más.

Un saludo

[JCMadrid]

- Solo una cuestión sencilla:

Al crear las celdas con

Código:

c1=newRow.insertCell(0);
c2=newRow.insertCell(1);
c3=newRow.insertCell(2);

ya se crean las TAGs <TD>. Por lo que no sería necesario meterlas en el innerHTML. Pero para añadirle el atributo ALING="RIGHT" a la primera celda (c1), supongo que tendría que añadir una línea del tipo

Código:

c1.aquilafunciónsetalign();

¿Qué función hace esto?

Creo que necesito un manual de referencia...

[JCMadrid]

Arreglado.

Dejo el código por si alguien lo encuentra de utilidad.

Código:

        if (CHKLOG.checked){

            // Añade campo de confirmación

            var TABLOG = document.getElementById("TLogin");
            var ROWLOG = document.getElementById("RLogin");
        
            var newRow = TABLOG.insertRow(5);
            c1=newRow.insertCell(0);
            c1.align = "right"
            c2=newRow.insertCell(1);
            c3=newRow.insertCell(2);

            c1.innerHTML="Repite la contraseña:";
            c2.innerHTML="<input type='password' name='vRPalabraPaso' value='' size='20'>";
            c3.innerHTML="&nbsp;";
                  
        } else {
        
            document.getElementById("TLogin").deleteRow(5);
        
        }

[zerokilled]

los atributos de HTML se convierten en propiedades para javascript. si por ejemplo tuviera el elemento <input type="text" name="nombre" readonly="readonly" />, las propiedades de estee elemento son type, name, readOnly. ahora, estos no son las unicas propiedades, sino que tambien hay otras definidas por el DOM.

aplicado a tu caso, la propiedad para alinear seria align y acepta como valor un string de los posibles valores que puede contener: left, center, right. en todo caso, el atributo queda o quedara descontinuado por el W3C de modo que lo correcto seria utilizar estilos. los estilos tambien se convierten propiedades para javascript con el objeto style de un dicho elemento. por ejemplo, en tu caso:

Código:

c1.style.textAlign = "left|center|right"; // cualquiera de los tres valores;

referencia para los style en javascript: http://www.w3schools.com/htmldom/dom_obj_style.asp
referencia para las propiedades de celdas: http://www.w3schools.com/htmldom/dom_obj_tabledata.asp
referencia del DOM: http://www.w3schools.com/htmldom/dom_reference.asp