IE Javascript Щелчок по проблеме

Question

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

JavaScript, html и т. Д. Все «приготовлены» и закодированы (я думаю, я немного не понятен о том, как работает процесс) перед развертыванием, поэтому я не могу присоединить VS 2005 к ie, а firebug lite не работает. Кроме того, интерфейс находится в кадрах (yuck), поэтому некоторые другие инструменты также не работают.

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

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

Эта ошибка исправлена ​​в новом Internet Explorer 8 бета-версии, но это проще просто использовать DOM Level 1 HTML свойство непосредственно:

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

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

table.closed tr { display: none; } 

Answer 2

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

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

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

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

или

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

Я всегда использую style.display = «блок» и style.display = «нет»