将表格切割成多列

Question

我有一个简单的html表，如下所示：

我想将其修改为：

我写了一个简单的插件来完成这项工作：

(function ($) {
    var settings;

    $.fn.splitTable = function (options) {
        var $this = this;
        //options
        settings = $.extend({}, defaults, options);

        $this.filter("table").each(function () {
            //body
            var table = $(this);
            var $tds = table.find('tbody td');
            var k, l;
            for (k = 0, l = Math.ceil($tds.length / settings.columns); l < $tds.length; k++, l++)
            $($tds[k]).parent().append($tds[l]);
            //header
            var $ths = table.find('thead th');
            for (var i = 0; i < settings.columns - 1; i++) {
                $ths.each(function () {
                    table.find('tr:first').append(this.outerHTML);
                });
            }
        });

        return $this;
    };

    var defaults = {
        columns: 2
    };
})(jQuery);

这是jsFiddle示例：http://jsfiddle.net/Misiu/Tsqvj/

这几乎按预期工作，但是jshint给出了我在克隆标题内部的错误：

  

不要在循环中创建函数。

第二件事就是速度。使用小表这可以正常工作，但是对于大表（行＆gt; 2k）和旧浏览器，这会冻结浏览器一段时间。

我知道我可以询问codereview，但我的代码没有按预期工作。如果它能够工作，我会尝试改进它，然后我会询问代码审查。

Answer 1

正如jshint错误消息所示，您正在循环中定义一个函数：

for (var i = 0; i < settings.columns - 1; i++) { /* THIS IS THE LOOP */
    $ths.each(function () { /* THIS IS THE FUNCTION */
        table.find('tr:first').append(this.outerHTML);
    });
}

通过在循环之前定义函数可以很容易地修复错误，如下所示：

var appendToTable = function () {
    table.find('tr:first').append(this.outerHTML);
}
for (var i = 0; i < settings.columns - 1; i++) {
    $ths.each(appendToTable);
}