Question

我使用嵌套for循环来生成包含项目详细信息的表的多个实例;我希望有一个显示/隐藏按钮，可以在很高的层次上对每个项目进行简短的描述。

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

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

FYI - 下面代码中的“Separate”是一个包含唯一项目引用的数组，以便于每个项目分离表。因此，如果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>";
}

screenshot

Answer 1

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

另外，IIRC，'display =“none”;'更好的相反是'display =“inline”;'，而不是'display =“”;'。虽然这需要在不同浏览器上进行更多测试以选择最佳选项。

第三，你在onclick事件中的JavaScript调用使用单引号BOTH作为属性值定义（围绕JS调用）和字符串参数（id表示/隐藏）......这是无效的语法，你需要将这两个用例中的一个用作双引号。

你的代码所遇到的另一个主要问题是mikez302已经发现：“Javascript函数名称区分大小写。你的函数叫做showhide但是你试图调用ShowHide。”纠正这两个问题（引号和函数名称）将允许代码工作，我刚刚测试它。：）

在变量中显示/隐藏多个DIV

1 个答案: