javascript - テーブル構造が書き込まれるときに複数の列をマージする

Question

テーブルの複数の列を 1 つの列にまとめてグループ化し、UL リストを使用してカテゴリを分離しようとしています。

このために、私がやっていることは、次のように、スタッキングの開始/停止を切り替えるブール値を追加することです:

cols[0][0]="Name";
cols[0][1]=true; //<--toggler

cols[1][0]="Age";
cols[1][1]=false;

cols[2][0]="[M/F]";
cols[2][1]=false;

cols[3][0]="E-mail";
cols[3][1]=true;//<--toggler

ただし、この方法を使用すると、いくつかの問題があります。

1. [A] [B+C][D+E] [F]の 2 つのグループを連続して作成できませんでした。
2. コードはかなり読みにくく、トグルが何をするのかを正確に理解するのも困難です

---

頭を書くための私のコードは次のとおりです。

document.writeln("<table><thead><tr>");

tmp = "<th>#";
flag = false;

for(i = 0; i < cols_len; i++){
    if(cols[i][1]){ //if stack-toggler
        if(flag){
            tmp += "</th><th>-";
        }

        flag = !flag;
    }

    if(!flag){
        tmp += "</th><th>" + cols[i][0];
    }
}

if(flag){
    tmp += "</th><th>-";
}

document.writeln(tmp + "</th></tr></thead><tbody>");

そして、テーブルの本体について:

for(i = 0; i < 20; i++){ //some number of rows
    if(i){
        document.writeln("</tr>");
    }

    document.writeln("<tr><td>" + i + "</td>");

    tmp = "";
    flag = false;

    for(j = 0; j < cols_len; j++){
        if(cols[j][1]){ //if stack-toggler
            if(flag){
                document.writeln("<td><ul>" + (tmp.replace(/<td/g, "<li").replace(/td>/g, "li>")) + "</ul></td>");
                tmp = "";
            }

            flag = !flag;
        }

        if(flag){
            tmp += "<strong>" + cols[j][0] + ":</strong><br>";
        }

        tmp += "<td>...</td>";

        if(!flag){
            document.writeln(tmp);

            tmp = "";
        }
    }

    if(flag){
        document.writeln("<td><ul>" + (tmp.replace(/<td/g, "<li").replace(/td>/g, "li>")) + "</ul></td>");
    }
}

document.writeln("</tr></tbody></table>");

»完全なコードとデモは、この jsFiddle にあります。

私はこれが間違ったアプローチであると感じています.それはあらゆる点でうまくいかず、さらに重要なことに、 2つ以上の連続したグループを持つことはできません!.列を積み重ね始めた後、停止したいときはいつでも、次の列は単独でなければなりません(そしてそうではありません)別のグループ）。

私はブール値をいじってみましたが、それは単に不可能です。理解できません。すでにコードを最も読みやすい方法に減らし、その一部を書き直そうとしましたが、同じ結果が得られ続けています。