HTML Table 空白单元格补全的简单实现

在最初自学 Web 开发的时候，那时没有所谓的 DIV/CSS 布局，一概 Table 布局的天下。当时有个问题就来了，如何补全宫格空白的单元格呢？——这是我在弄公司产品页头痛的问题。因为我不是学程序出身的，碰到这稍带

算法

的问题，就束手无策了，呵呵。顺带说说，记得分页的算法还折腾了我一下呢。

所谓宫格，就是说表格，3 行x 4 列 = 共12 单元格。如果只有 10 个产品，就只能填充表格 10 个单元格，其余的为空白。虽然空白，但也要渲染显示空白 td 就是个问题。我当时想了几个方法，回想起来很当然很不是合理，总之都是死马当活马医……能显示就行……呵呵。

后来到了 DIV/CSS 时代，Table 遭弃用。于是该算法也没关心了。——再后来一次项目中，发现 table 布局仍然适用的，于是就琢磨了一下这小问题。用 JS 动态控制的代码如下：

生成一个表格 table 的 markup。 * @param {Array} list * @param {Number} cols * @param {Function} getValue */ define(function(require,exports,module) { module.exports = function (list,cols,getValue){ this.list = list; this.cols = cols || 5;

    this.getValue = getValue || this.getValue;
}

module.exports.prototype = (new function(){
    this.render = function(list){
        list = list || this.list;

        var len = list.length ;
        var cols = this.cols;// 位数
        var rows;
        var remainder = len % cols;
        var htmls = [];
            rows = len / remainder;

        if(remainder == 0){ // 可整除 无余数 直接处理
            list.forEach(addTr.bind({
                cols : cols,htmls: htmls,getValue : this.getValue
            }));
        }else{  // 处理余数部分
            var remainnerArr = list.splice(list.length - remainder);

            list.forEach(addTr.bind({
                cols : cols,getValue : this.getValue
            }));

            // 填空位
            var emptyArr = new Array(cols - remainnerArr.length);
            emptyArr = emptyArr.join('empty');
            emptyArr = emptyArr.split('empty');
            // 余数部分 + 空位
            remainnerArr = remainnerArr.concat(emptyArr);

            if(remainnerArr.length != cols){
                throw '最后一行长度<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>！长度应该为' + cols;
            }
            remainnerArr.forEach(addTr.bind({
                cols : cols,getValue : this.getValue
            }));
        }


        return addTable(htmls.join(''));
    }

    /**
     * 默认的<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>值的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>。一般要覆盖该<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>。
     * @param {Mixed}
     * @return {String}
     */
    this.getValue = function(data){
        return data;
    }

    /**
     * 为每个值加个 <td&gt;</td&gt;。若满一行加一个 </tr&gt;</tr&gt;
     * @param {Mixed} item
     * @param {Number} i
     * @param {Array} arr
     */
    function addTr(item,i,arr){
        var html = '<td&gt;' + this.getValue(item) + '</td&gt;';

        if(i == 0){
            html = '<tr&gt;' + html;
        }else if((i + 1) % this.cols == 0 && i != 0){
            html += '</tr&gt;<tr&gt;';
        }else if(i == arr.length){
            html += '</tr&gt;';
        }

        this.htmls.push(html);
    }

    /**
     * 
     * @param {String} html
     */
    function addTable(html){
        return '<table&gt;' + html + '</table&gt;';
//      var table = document.createElement('table');
//      table.innerHTML = html;
//      table.border="1";
//      document.body.appendChild(table);
    }
});

});

大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……

以上就是小编为大家带来的HTML Table 空白单元格补全的简单实现全部内容了，希望大家多多支持编程之家~

原文链接：https://www.f2er.com/js/45208.html

HTML Table 空白单元格补全的简单实现

算法

猜你在找的JavaScript相关文章