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

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)更多信息(隐藏显示颜色和数字)

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

我试过这样的事情: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");
            });
})