IE Javascript Clicando Issue

StackOverflow https://stackoverflow.com/questions/102261

Pergunta

Primeiro, eu estou trabalhando em um aplicativo que está escrito de tal forma que algumas de suas ferramentas de depuração típicos não podem ser usados ??(ou pelo menos eu não consigo descobrir como :).

JavaScript, HTML, etc são todos "cozido" e codificado (eu acho, eu estou um pouco confuso sobre como funciona o processo) antes de ser implantado, então eu não posso anexar VS 2005 para isto, e Firebug Lite doesn 't funcionam bem. Além disso, a interface está em quadros (eca), então algumas outras ferramentas não funcionam tão bem.

Firebug funciona muito bem no Firefox, que não está tendo este problema (nem é Safari), então eu estou esperando que alguém pode detectar algo "obviamente" errado com a maneira como o meu código vai jogar com o IE. Há mais informação que pode ser dada sobre a sua estranheza, mas vamos começar com isso.

Basicamente, eu tenho uma função que "desmorona" tabelas em seus cabeçalhos, fazendo linhas da tabela normais não visível. Eu tenho "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" nas tags <tr> e mesas começar com "class = 'fechado'".

Single clica colapso e expandir tabelas no FF & Safari, mas as mesas IE exigir vários cliques (um número aparentemente arbitrária entre 1 e 5) para expandir. Às vezes, depois de inicialmente se "aberto", as tabelas irá expandir e recolher com um único clique por pouco tempo, apenas para, eventualmente, reverter para exigindo vários cliques. Eu posso dizer pelo pouco que pode ver no Visual Studio que a função está realmente sendo atingido cada vez. Agradecemos antecipadamente por qualquer conselho!

Aqui está o 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);
    }
}

Foi útil?

Solução

setAttribute não é confiável no IE. Trata acesso a atributos e acesso propriedade do objeto como a mesma coisa, então porque a propriedade DOM para o atributo 'class' é chamado de 'className', você teria que usar que em vez de IE.

Este bug foi corrigido no novo beta do IE8, mas é mais fácil simplesmente usar o DOM Nível propriedade 1 HTML diretamente: 

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

Você também pode fazer a dobradura mesa na folha de estilo, que será mais rápido e você vai economizar o incômodo de ter que varrer as linhas da tabela no script: 

table.closed tr { display: none; }

Outras dicas

Você já tentou mudar esta linha 

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

para algo como 

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

ou 

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

Você pode querer colocar a sua chamada onclick na tag <tr> real em vez das tags <th> individuais. Desta forma, você tem menos JS em seu HTML que irá torná-lo mais sustentável.

Se você ativar depuração de script no IE (Ferramentas-> Opções da Internet-> Avançadas) e colocar um 'depurador;' declaração no código, IE será automaticamente trazer Visual Studio quando bate a declaração depurador.

Eu tive problemas com isso no IE. Se bem me lembro, eu precisava colocar um valor inicial para o estilo "display", diretamente no HTML como ele foi gerado inicialmente. Por exemplo: 

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

Então eu poderia usar o JavaScript para alterar o estilo, a maneira como você está fazendo isso.

Eu sempre uso style.display = "bloco" e style.display = "none"

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top