0

我正在尝试通过将表中的多个列折叠成单个列来对它们进行分组，然后使用 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. 代码很难阅读，也很难理解切换的作用

我编写头部的代码如下：

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 中找到。

我觉得这是错误的方法，它在各个方面都很糟糕，更重要的是，我不能有两个或更多连续的组！，在我开始堆叠列之后，每当我想停下来时，下一列必须是单独的（而不是另一组）。

我玩过布尔值，这根本不可能，我想不通，我已经将代码简化为最易读的方式并尝试重写其中的一部分，但我一直得到相同的结果。

4

1 回答 1

1

我对数据模型做了一点改动。布尔值不是“切换”，而是表示下一个人是否堆叠（也就是说，如果它是真的，那么将下一个放在我下面。）

所以数据看起来像这样：

/*0:caption, 1:stack-toggler*/
cols[0][0]="Name";
cols[0][1]=true; //<--stack next below

cols[1][0]="Age";
cols[1][1]=true; //<--stack next below

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

cols[3][0]="E-mail";
cols[3][1]=false; 

cols[4][0]="Website";
cols[4][1]=false;

cols[5][0]="Notes";
cols[5][1]=false;

然后代码可以很简单——像这样（我使用的一个技巧，你可以改变循环内部的循环变量——所以当我们改变列时我们只在外循环上循环。）

for(i = 0; i < 20; i++){ //some number of rows
    buildHTML("<tr><td>" + i + "</td>");

    for(j = 0; j < cols_len; j++){
        buildHTML("<td>");

        if (cols[j][1]) {
            buildHTML("<ul>"+cols[j][0]+"</ul>");

            // loop till we are at the penultimate 
            while (cols[j+1][1]) {
               j++;  
               buildHTML("<ul>"+cols[j][0]+"</ul>");
            }

            j++;                
            buildHTML("<ul>"+cols[j][0]+"</ul>");

        }
        else {
            buildHTML(cols[j][0]);
        }    
        buildHTML("</td>");
    }
    buildHTML("</tr>");
}

buildHTML("</tbody></table>");

我没有打扰标题，您可以确定我敢肯定。

这是小提琴：

http://jsfiddle.net/eajQy/3/

当然，使用 javascript 你可以得到幻想。由于您真正拥有的是列的数组，因此您可以像这样表示：

// array of arrays -- one element std, 2 or more a list 
newcols = [ ["Name","Age","[M/F]"] , ["E-Mail"] , ["Website"], ["Notes"] ];

然后为了制作你的桌子，你可以像这样使用 map 和 join：

buildHTML("<tr><td>" + i + "</td>");

strArray = $.map(newcols, function (anArray) { 
   if (anArray.length == 1) {
      return "<td>"+anArray[0]+"</td>";
   } 
   else {
     return "<td><ul>"+anArray.join("</ul><ul>")+"</ul></td>";
   }
});

buildHTML(strArray.join(""));

buildHTML("</td></tr></tbody></table>");

这是一个小提琴：

http://jsfiddle.net/eajQy/4/

单行解决方案（因为每个问题都应该有一个单行解决方案）：

http://jsfiddle.net/eajQy/5/

于 2013-05-28T02:03:46.673 回答