IE Javascript点击问题

Question

首先，我正在开发一个编写的应用程序，使得您的某些典型调试工具无法使用（或者至少我不知道该如何使用：）。

在部署之前，JavaScript，html等都已“煮熟”并进行了编码（我认为；我对该过程的工作方式有些模糊），因此我无法将VS 2005附加到ie上，并且Firebug lite无法正常工作好。 而且，该界面以帧为单位（糟糕），因此其他一些工具也无法正常工作。

Firebug在没有这个问题的Firefox中也很好用（Safari也没有），所以我希望有人可能发现我的代码在IE中的播放方式“明显”存在问题。 关于其古怪性，可以提供更多信息，但让我们从此开始。

基本上，我有一个函数，通过使普通表行不可见来将表“折叠”到其标题中。 我在<tr>标记中有"onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" ，表的开头是“ 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中不可靠。 它将属性访问和对象属性访问视为同一事物，因此，由于“ class”属性的DOM属性称为“ className”，因此必须在IE上使用它。

此错误已在新的IE8 Beta中修复，但直接使用DOM Level 1 HTML属性更容易：

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

您还可以在样式表中进行表格折叠，这将更快，并且省去了在脚本中循环遍历表格行的麻烦：

table.closed tr { display: none; }

Answer 3

您可能希望将onclick调用放在实际的<tr>标签上，而不是在各个<th>标签上。 这样，您的HTML中的JS较少，这将使其更易于维护。

Answer 4

如果您在IE中启用了脚本调试功能（工具-> Internet选项->高级），并放置了“调试器”； 代码中的IE语句，当IE到达调试器语句时，它将自动启动Visual Studio。

Answer 5

我在IE中遇到了这个问题。 如果我没记错的话，我需要将“显示”样式的初始值直接放在最初生成的HTML上。 例如：

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

然后，我可以使用JavaScript更改样式，即您的操作方式。

Answer 6

我总是使用style.display =“ block”和style.display =“ none”