IE Javascript 点击问题

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

题

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

JavaScript、html 等都是“煮熟的”和编码的（我认为；在部署之前我对这个过程是如何工作的有点模糊，所以我无法将VS 2005附加到ie上，并且firebug lite也不能很好地工作。另外，该界面位于框架中（恶心），因此其他一些工具无法正常工作。

Firebug 在 Firefox 中工作得很好，它没有这个问题（Safari 也没有），所以我希望有人可能会发现我的代码在 IE 上运行的方式有一些“明显”的错误。关于它的怪异之处还可以提供更多信息，但让我们从这个开始。

基本上，我有一个功能，可以通过使普通表行不可见来将表“折叠”到其标题中。我有 "onclick='toggleDisplay("theTableElement", "theCollapseImageElement")'" 在里面 <tr> 标签和表格以“class='close'”开头。

在 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中不可靠。它将属性访问和对象属性访问视为同一个东西，因为'class'属性的DOM属性称为'className'，你必须在IE上使用它。

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

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中启用脚本调试（工具 - <！> gt; Internet选项 - <！> gt;高级）并放置'调试器;'在代码中的语句中，IE会在遇到调试器语句时自动调出Visual Studio。

我在IE中遇到过这个问题。如果我没记错的话，我需要为<！> quot; display <！>添加初始值。样式，直接在最初生成的HTML上。例如：

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

然后我可以使用JavaScript来改变风格，就像你一样。

我总是使用style.display = <！> quot; block <！> quot;和style.display = <！> quot; none <！> quot;

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top