隐藏/显示列 - 如何对列进行分组？

Question

目前，我有这方面的工作代码：http://jsfiddle.net/tarabyte/s8Qds/3/

的Javascript：

$(function() {  
(function generateStyleSheet(len){ 
    var styles = [], i = 0; 

    for(; i < len; i++) { 
     styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ; 
    } 

    $('<style>' + styles.join('\n') + '</style>').appendTo(document.body); 
}(100)) 

function Toggler(idx, text, table, togglers) { 
    this.idx = idx; 
    this.text = $.trim(text); 
    this.table = table; 
    this.togglers = togglers; 
    this.init(); 
} 

Toggler.prototype.init = function() { 
    this.element = $('<span class="toggler" >' + this.text + '</span>').appendTo(this.togglers).data('toggler', this); 
}; 

Toggler.prototype.toggle = function() { 
    this.element.toggleClass('pressed'); 
    this.table.toggleClass('hide-'+this.idx); 
}; 

function Togglers(el, table, hidden) { 
    this.el = el.jQuery ? el : $(el); 
    this.table = table.jQuery ? table : $(table); 
    this.togglers = {}; 
    this.hidden = hidden||[]; 
    this.init(); 
} 

Togglers.prototype.init = function() { 
    var columns = 0, me = this; 
    this.el.on('click', '.toggler', function(e){ 
     $(e.target).data('toggler').toggle(); 
    }); 

    this.table.find('th').each(function(idx, header){ 
     header = $(header); 
     me.add(idx, header.text()); 
     header.addClass('column-' + idx); 
     columns++; 
    }).end() 
     .find('td').each(function(idx, td) { 
      $(td).addClass('column-' + (idx%columns)); 
     }); 

    $.each(this.hidden, function(_, name) { 
     me.toggle(name);  
    }); 
}; 

Togglers.prototype.toggle = function(name) { 
    var toggler = this.togglers[name]; 
    if(toggler) { 
     toggler.toggle() 
    } 
    else { 
     console.warn('Unable to find column with name: ' + name); 
    } 
}; 

Togglers.prototype.add = function(idx, name) { 
    var toggler = new Toggler(idx, name, this.table, this.el); 
    this.togglers[toggler.text] = toggler; 
}; 

var togglers = new Togglers('#togglers', $('#table'), ['Color']); 


togglers.toggle('Number'); 


}) 

CSS

.toggler { 
    display: inline-block; 
    padding: 5px 10px; 
    margin: 2px; 
    border: 1px solid black; 
    border-radius: 2px; 
    cursor: pointer; 
} 

.toggler.pressed { 
    background-color: #BBB; 
} 

HTML

<div id="togglers"></div> 
<table id="table"> 
    <tr> 
     <th class="Title">ID</th> 
     <th class="Title">Color</th> 
     <th class="Title">Number</th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>#990000</td> 
     <td>C001</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>#009900</td> 
     <td>C002</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>#FFFFFF</td> 
     <td>C003</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>#000000</td> 
     <td>C004</td> 
    </tr> 
</table> 

现在我想要做的就是组“颜色”和“数字”。所以你会看到ID（隐藏/显示ID）更多信息（隐藏显示颜色和数字）

我不知道默认情况下colums的顺序，我只知道我想要的列的名称组。

我试过这样的：http://jsfiddle.net/Ap9sQ/6/ 我改变了一些值，所以它在我的网站上工作。问题是，我不能让默认的“更多信息”灰色，当你点击它绿色（或）灰色...

Answer 1

我有解决方案，但这是好的代码？

不要看var的名字，我会用更好的名字来改变它们。

http://jsfiddle.net/n4zzf/4/

只有JavaScript的（其余的已经不那么重要）

$(function() {  
(function generateStyleSheet(len){ 
    var styles = [], i = 0; 

    for(; i < len; i++) { 
     styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ; 
    } 

    $('<style>' + styles.join('\n') + '</style>').appendTo(document.body); 
}(100)) 

function Toggler(idx, text, table, togglers) { 
    this.idx = idx; 
    this.text = $.trim(text); 
    this.table = table; 
    this.togglers = togglers; 
    this.init(); 
} 
var navigation = 1; 
var nav; 
var DatesGroupNavigation = []; 
var DatesGroupNavigation2 = []; 
Toggler.prototype.init = function() { 
    this.element = $('<span class="toggler navigation'+navigation+'" >' + this.text + '</span>').appendTo(this.togglers).data('toggler', this); 
      switch (0){ 
      case this.text.indexOf("Title01"): 
      case this.text.indexOf("Title02"): 
      case this.text.indexOf("Title03"): 
      case this.text.indexOf("Title04"): 
         DatesGroupNavigation.push(navigation); 
         break; 
      case this.text.indexOf("Title1"): 
      case this.text.indexOf("Title2"): 
      case this.text.indexOf("Title3"): 
      case this.text.indexOf("Title4"): 
         DatesGroupNavigation2.push(navigation); 
         break; 
      } 
      navigation++; 
}; 

Toggler.prototype.toggle = function() { 
    this.element.toggleClass('pressed'); 
    this.table.toggleClass('hide-'+this.idx); 
}; 

function Togglers(el, table, hidden) { 
    this.el = el.jQuery ? el : $(el); 
    this.table = table.jQuery ? table : $(table); 
    this.togglers = {}; 
    this.hidden = hidden||[]; 
    this.init(); 
} 

var DatesGroupColumns = []; 
var DatesGroupColumns2 = []; 
var title; 
Togglers.prototype.init = function() { 
    var columns = 0, me = this; 
    this.el.on('click', '.toggler', function(e){ 
     $(e.target).data('toggler').toggle(); 
    }); 


    this.table.find('th').each(function(idx, header){ 
     if(columns>0){ 
      header = $(header); 
      me.add(idx, header.text()); 
      header.addClass('column-' + idx); 
      title = header.text(); 
      switch (0){ 
      case title.indexOf("Title01"): 
      case title.indexOf("Title02"): 
      case title.indexOf("Title03"): 
      case title.indexOf("Title04"): 
         console.warn(idx); 
         DatesGroupColumns.push(idx); 
         break; 
      case title.indexOf("Title1"): 
      case title.indexOf("Title2"): 
      case title.indexOf("Title3"): 
      case title.indexOf("Title4"): 
         console.warn(idx); 
         DatesGroupColumns2.push(idx); 
         break; 
      } 
     } 
     columns++; 
    }).end() 
     .find('td').each(function(idx, td) { 
      $(td).addClass('column-' + (idx%columns)); 
     }); 

    $.each(this.hidden, function(_, name) { 
     me.toggle(name);  
    }); 
}; 

Togglers.prototype.toggle = function(name) { 
    var toggler = this.togglers[name]; 
    if(toggler) { 
     toggler.toggle() 
    } 
    else { 
     console.warn('Unable to find column with name: ' + name); 
    } 
}; 

Togglers.prototype.add = function(idx, name) { 
    var toggler = new Toggler(idx, name, this.table, this.el); 
    this.togglers[toggler.text] = toggler; 
}; 

var togglers = new Togglers('#togglers', $('#table'), ['Color']); 
/*togglers.toggle('Client');*/ 
var Loop; 
DatesGroupNavigationLength = DatesGroupNavigation.length; 
for (Loop = 0; Loop < DatesGroupNavigationLength; Loop++) { 
    console.warn(DatesGroupNavigation[Loop]); 
    $('.navigation'+DatesGroupNavigation[Loop]).addClass('HideColumn'); 
} 
console.warn(DatesGroupColumns); 
Loop = 0; 
DatesGroupColumnsLength = DatesGroupColumns.length; 
$('<span class="togglerExtra navigation'+navigation+'" >All title with 0</span>').appendTo($("#togglers")).click(function() { 
       for (Loop = 0; Loop < DatesGroupColumnsLength; Loop++) { 
        console.warn(Loop + " - test: " + DatesGroupColumns[Loop]); 
        $('.navigation'+ DatesGroupColumns[Loop]).data('toggler').toggle(); 
       } 
       $('.navigation'+navigation).toggleClass("pressed"); 
      }); 
Loop = 0; 
var navigation2 = navigation+1; 
DatesGroupNavigationLength2 = DatesGroupNavigation2.length; 
for (Loop = 0; Loop < DatesGroupNavigationLength2; Loop++) { 
    console.warn(DatesGroupNavigation2[Loop]); 
    $('.navigation'+DatesGroupNavigation2[Loop]).addClass('HideColumn'); 
} 
console.warn(DatesGroupColumns2); 
Loop = 0; 
DatesGroupColumnsLength2 = DatesGroupColumns2.length; 
$('<span class="togglerExtra navigation'+navigation2+'" >All title without 0</span>').appendTo($("#togglers")).click(function() { 
       for (Loop = 0; Loop < DatesGroupColumnsLength2; Loop++) { 
        console.warn(Loop + " - test: " + DatesGroupColumns2[Loop]); 
        $('.navigation'+ DatesGroupColumns2[Loop]).data('toggler').toggle(); 
       } 
       $('.navigation'+navigation2).toggleClass("pressed"); 
      }); 
})