IE Javascript Clicking Проблема

Question

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

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);
    }
}

Answer 1

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

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

что-то вроде

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

или

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

Answer 2

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

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

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

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

table.closed tr { display: none; }

Answer 3

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

Answer 4

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

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

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

Answer 5

Если вы включаете отладку скриптов в IE (Сервис-> Свойства обозревателя-> Дополнительно) и ставите «Отладчик» оператор в коде, IE автоматически вызовет Visual Studio, когда он попадет в оператор отладчика.

Answer 6

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