1

我正在使用嵌套的 for 循环来生成包含项目详细信息的表的多个实例；我希望在它下面有一个显示/隐藏按钮，它将对每个项目进行简要描述。

我正在尝试操作在这里找到的代码：https ://forums.digitalpoint.com/threads/javascript-to-show-hide-tables.1009918/

以下代码会生成一个在我的页面上不起作用的“显示/隐藏”链接（请参见屏幕截图）。我错过了什么吗？

仅供参考 - 下面代码中的“分离”是一个包含唯一项目引用的数组，以促进每个项目的表的分离。因此，Separate 包含 4 个元素的地方，应该有 4 个项目、4 个表，等等。

非常感谢，卡尔

function showhide(id){ 
    if (document.getElementById){ 
            obj = document.getElementById(id); 
            if (obj.style.display == "none"){ 
            obj.style.display = ""; 
        } else { 
            obj.style.display = "none"; 
        } 
    } 
} 

for(i in Separate){
DescID[i] = "DescID"+i;}

var Table = "";

for(i in Separate){
Table += "<table  id='dashboard' summary='Project Dashboard'>";
Table += "<THEAD>";
Table += "<TR><TH scope='col' colspan=4><B>"+ Separate[i] +"</B></TH></TR>";
Table += "<TR><TH scope='col'>Task Names</TH><TH scope='col'>Task Summary</TH><TH scope='col'>RAG</TH><TH scope='col'>Timeline</TH></TR></THEAD>";
Table += "</THEAD>";
Table += "<TBODY>";

    for(j in Project){
    if(Project[j] == Separate[i]){
        Table += "<TR><TD title='" + Comments[j] + "'>"+ Task[j] +"</TD><TD>"+ Summary[j] +"</TD><TD><img src='/images/RAG/" + RAG[j] + "'></TD><TD>"+ DateType[j] +" "+ Status[j].substring(0,10) +"</TD></TR>";
            }
    }

Table += "</TBODY>";
Table += "</table>";
Table += "<a onclick ='javascript:ShowHide('" + DescID[i] + "')' href='javascript:;' >Show/Hide Project Description</a>";
Table += "<div class='mid' id='" + DescID[i] + "' style='DISPLAY: none' >Placeholder for Project Description</div>";
Table += "<BR>";
}

截屏

4

1 回答 1

0

您错过了 HTML 标记“id”（例如，对于您的项目表）应该是唯一的这一事实，否则“getElementById”将不起作用。现在它们都设置为“仪表板”。至少您可以添加索引，并将它们设为“dashboard1”、“dashboard2”等...

此外，IIRC，'display = "none";' 是'display = "inline";'，而不是'display = "";'。尽管这需要在不同的浏览器上进行更多测试才能选择最佳选项。

第三，您在 onclick 事件中的 JavaScript 调用对属性值定义（围绕 JS 调用）和字符串参数（要显示/隐藏的 id）使用单引号......这不是有效的语法，您需要其中之一这两个用例是双引号。

您的代码存在的另一个主要问题是 mikez302 已经发现：“Javascript 函数名称区分大小写。您的函数称为 showhide，但您正在尝试调用 ShowHide。” 更正这两个问题（引号和函数名称）将允许代码工作，我刚刚测试过。:)

于 2013-04-06T01:13:04.780 回答