Problema al hacer clic en IE Javascript

Question

En primer lugar, estoy trabajando en una aplicación escrita de tal manera que algunas de las herramientas de depuración típicas no se pueden usar (o al menos no puedo entender cómo :).

JavaScript, html, etc. están todos "preparados" y codificados (creo;Estoy un poco confuso sobre cómo funciona el proceso antes de implementarlo, por lo que no puedo conectar VS 2005 a ie, y Firebug Lite no funciona bien.Además, la interfaz está en marcos (qué asco), por lo que algunas otras herramientas no funcionan tan bien.

Firebug funciona muy bien en Firefox, que no tiene este problema (ni tampoco Safari), así que espero que alguien pueda detectar algo "obviamente" mal en la forma en que mi código se reproducirá con IE.Se puede dar más información sobre su peculiaridad, pero comencemos con esto.

Básicamente, tengo una función que "colapsa" las tablas en sus encabezados haciendo que las filas normales de la tabla no sean visibles.Tengo "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" en el <tr> Las etiquetas y las tablas comienzan con "class='closed'".

Un solo clic colapsa y expande tablas en FF y Safari, pero las tablas de IE requieren múltiples clics (un número aparentemente arbitrario entre 1 y 5) para expandirse.A veces, después de "abrirse" inicialmente, las tablas se expandirán y colapsarán con un solo clic durante un tiempo, solo para eventualmente volver a requerir múltiples clics.Puedo decir por lo poco que puedo ver en Visual Studio que la función realmente se alcanza cada vez.¡Gracias de antemano por cualquier consejo!

Aquí está el código JS:

bURL_RM_RID="some image prefix";
CLOSED_TBL="closed";
OPEN_TBL="open";
CLOSED_IMG= bURL_RM_RID+'166';
OPENED_IMG= bURL_RM_RID+'167';

//collapses/expands tbl (a table) and swaps out the image tblimg
function toggleDisplay(tbl, tblimg) {
    var rowVisible;
    var tblclass = tbl.getAttribute("class");
    var tblRows = tbl.rows;
    var img = tblimg;

    //Are we expanding or collapsing the table?
    if (tblclass == CLOSED_TBL) rowVisible = false;
    else rowVisible = true;

    for (i = 0; i < tblRows.length; i++) {
        if (tblRows[i].className != "headerRow") {
            tblRows[i].style.display = (rowVisible) ? "none" : "";
        }
    }

    //set the collapse images to the correct state and swap the class name
    rowVisible = !rowVisible;
    if (rowVisible) {
        img.setAttribute("src", CLOSED_IMG);
        tbl.setAttribute("class",OPEN_TBL);     
    }
    else {
        img.setAttribute("src", OPENED_IMG);
        tbl.setAttribute("class",CLOSED_TBL);
    }
}

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

setAttribute no es confiable en IE.Trata el acceso a atributos y el acceso a propiedades de objetos como lo mismo, por lo que debido a que la propiedad DOM para el atributo 'clase' se llama 'nombre de clase', tendría que usarla en su lugar en IE.

Este error se solucionó en la nueva versión beta de IE8, pero es más fácil simplemente usar la propiedad HTML DOM Nivel 1 directamente:

img.src= CLOSED_IMAGE;
tbl.className= OPEN_TBL;

También puedes doblar la tabla en la hoja de estilo, lo que será más rápido y te ahorrará la molestia de tener que recorrer las filas de la tabla en script:

table.closed tr { display: none; }

Answer 2

¿Has intentado cambiar esta línea?

tblRows[i].style.display = (rowVisible) ? "none" : "";

a algo como

tblRows[i].style.display = (rowVisible) ? "none" : "table-row";

o

tblRows[i].style.display = (rowVisible) ? "none" : "auto";

Answer 3

Es posible que desee realizar su llamada onclick en el sitio real <tr> etiqueta en lugar del individuo <th> etiquetas.De esta manera, tendrá menos JS en su HTML, lo que lo hará más fácil de mantener.

Answer 4

Si habilita la depuración de script en IE (herramientas-> Opciones de Internet-> Avanzado) y pone un 'depurador'; Declaración En el código, es decir, aparecerá automáticamente Visual Studio cuando llegue a la declaración del depurador.

Answer 5

He tenido problemas con esto en IE.Si no recuerdo mal, necesitaba poner un valor inicial para el estilo "mostrar", directamente en el HTML tal como se generó inicialmente.Por ejemplo:

<table>
  <tr style="display:none"> ... </tr>
  <tr style="display:"> ... </tr>
</table>

Entonces podría usar JavaScript para cambiar el estilo, la forma en que lo haces.

Answer 6

Siempre uso style.display = "block" y style.display = "none"