Проблема с нажатием Javascript в IE

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

Вопрос

Во-первых, я работаю над приложением, написанным таким образом, что некоторые из ваших типичных инструментов отладки невозможно использовать (или, по крайней мере, я не могу понять, как :).

JavaScript, HTML и т. д. — все «приготовлено» и закодировано (я думаю;Я немного не понимаю, как работает этот процесс) перед развертыванием, поэтому я не могу подключить VS 2005 к ie, а Firebug lite работает не очень хорошо.Кроме того, интерфейс заключен в рамки (фу), поэтому некоторые другие инструменты не работают.

Firebug отлично работает в Firefox, где этой проблемы нет (как и в Safari), поэтому я надеюсь, что кто-нибудь заметит что-то «очевидно» неправильное в том, как мой код будет работать с IE.О его причудливости можно рассказать больше, но давайте начнем с этого.

По сути, у меня есть функция, которая «сворачивает» таблицы в их заголовки, делая обычные строки таблицы невидимыми.У меня есть "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" в <tr> теги, а таблицы начинаются с «class='closed'».

Таблицы в FF и Safari сворачиваются и разворачиваются одним щелчком мыши, но для расширения таблиц IE требуется несколько щелчков мышью (казалось бы, произвольное число от 1 до 5).Иногда после первоначального «открытия» таблицы на некоторое время расширяются и сворачиваются одним щелчком мыши, но в конечном итоге снова требуют нескольких щелчков мышью.Из того немногого, что я вижу в Visual Studio, я могу сказать, что функция действительно достигается каждый раз.Заранее благодарю за любой совет!

Вот 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);
    }
}

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

Это было полезно?

Решение

setAttribute ненадежен в IE.Он рассматривает доступ к атрибутам и доступ к свойствам объекта как одно и то же, поэтому, поскольку свойство DOM для атрибута «класс» называется «имя класса», вам придется использовать его вместо этого в IE.

Эта ошибка исправлена ​​в новой бета-версии IE8, но проще напрямую использовать свойство HTML DOM уровня 1:

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

Вы также можете выполнить свертывание таблицы в таблице стилей, что будет быстрее и избавит вас от необходимости перебирать строки таблицы в сценарии:

table.closed tr { display: none; }

Другие советы

Вы пробовали изменить эту строку

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

к чему-то вроде

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

или

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

Возможно, вы захотите разместить вызов onclick на фактическом <tr> тег, а не отдельный человек <th> теги.Таким образом, в вашем HTML будет меньше JS, что сделает его более удобным в обслуживании.

Если вы включите отладку сценария в IE (Tools-> Internet Options-> Advanced) и поместите «отладчик»; Оператор в коде, IE автоматически разбудет Visual Studio, когда он достигнет оператора отладчика.

У меня были проблемы с этим в IE.Если я правильно помню, мне нужно было поместить начальное значение стиля «отображение» непосредственно в HTML-код, который был изначально сгенерирован.Например:

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

Тогда я мог бы использовать JavaScript, чтобы изменить стиль так, как вы это делаете.

Я всегда использую style.display="block" и style.display="none".

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top