Question

该脚本的目标是：

在table

div

在初始步骤中，隐藏td限制

div

点击下一个或上一个，向左或向右移动td

这里是剧本：

(function(self, $) {

    options = {                                         
        //taille du wrapper 
        w_wrap: $('.grid-wrap').width(),
        //taille de la table
        w_table: $('.table').width(),
        //nb de colonnes
        nb_col: $('.table tr:nth-child(1) td').length,
        //taille de chaque colonne
        w_array_td: [],
        //index des colonnes cachés à gauche
        min_array_td_hide: [],
        //index des colonnes cachés à droite
        max_array_td_hide: []
    },              

    min_max = function(arr){
        var min = Math.min.apply(Math, arr);
        var max = Math.max.apply(Math, arr);
        //ici on exploite toute la puissance de la funk allemande !
        return { min: (min === min/0 ? 0 : min), max: (max === max/0 ? 0 : max)};
    },

    self.init = function (opt){
        debugger;

        var arr = [];
        for (i = 1; i <= options.nb_col; i++)
        {
            arr.push($('td:nth-child(' + i + ')').width());
        };
        options.w_array_td = arr;

        //Si la table est supérieur au container
        if (options.w_table > options.w_wrap)
        {
            //on cache les colonnes en commencant par la dernière
            var size = options.w_table;
            var c = options.nb_col;
            while (size > options.w_wrap)
            {
                $('th:nth-child(' + c + '),td:nth-child(' + c + ')').hide();
                size = size - options.w_array_td[c-1];
                options.max_array_td_hide.push(c);
                c = c - 1;                                                                  
            }
        }                                                   
        // #TODO : Si premier ou dernier, caché le lien

    },

    self.prev = function() {
        debugger;
        //get le min et le max
        var min = min_max(options.min_array_td_hide);
        var max = min_max(options.max_array_td_hide);
        // posibilité d'aller plus loin à gauche ?
        if (min.min >= 1)
        {
            //on retire 1 a gauche
            var index = min.max - 1;
            options.min_array_td_hide.push(index);
            $('th:nth-child('+index+'),td:nth-child('+index+')').hide();

            //on affiches celle de droite                                                                                                       
            options.max_array_td_hide = options.max_array_td_hide.filter(function(e) { return e !== min.max})
            $('th:nth-child(' + (min.max) + '),td:nth-child(' + (min.max) + ')').show();
        }                                   
    },

    self.next = function() {
        debugger;
        //get le min et le max
        var min = min_max(options.min_array_td_hide);
        var max = min_max(options.max_array_td_hide);
        // posibilité d'aller plus loin à droite ?
        if (max.max <= options.nb_col && max.max !== 0)
        {
            //on ajoute 1 de plus à gauche
            var index = min.max + 1;
            options.min_array_td_hide.push(index);
            $('th:nth-child('+index+'),td:nth-child('+index+')').hide();

            //on affiches celle de droite                                                                                                       
            options.max_array_td_hide = options.max_array_td_hide.filter(function(e) { return e !== max.min})
            $('th:nth-child(' + (max.min) + '),td:nth-child(' + (max.min) + ')').show();
        }                                               
    }
})
(window.grid = window.grid || {},
window.jQuery = window.jQuery);

和CSS：

.grid-mvc {
    position: relative;
    width: 500px;
    overflow: hidden;
}

.table{
    width: 700px;
    table-layout: fixed;
}
.table td,
.table th
{
    /*width: 100px;*/
    overflow: hidden;
    /*display: inline-block;*/
    white-space: nowrap;                    
}

html网格是标准table thead th tbody tr td

我的问题是arr.push($('td:nth-child(' + i + ')').width());返回的宽度与CSS中的td宽度不匹配，那么array_hide是错误的，并且所有机制都已损坏。

然后如何检索td的正确宽度？并随意评论我的脚本以提高他的质量：）

编辑：

jsfiddle

Answer 1

好的，经过一些尝试，我找到了好的选择器。

for (i = 1; i <= this.options.nb_col(this.jqContainer); i++) {
    arr.push(this.jqContainer.find('.table th:nth-child(' + i + ')').width());
};

th具有良好的宽度值，但td在初始化步骤中没有。

隐藏在<div>外面，知道好宽度

1 个答案: