javascript - 変数内の複数の DIV の表示/非表示

Question

プロジェクトの詳細を含むテーブルの複数のインスタンスを生成するために、ネストされた 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>";
}