javascript - 将表格切割成多列

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 在我克隆标头的地方给了我错误：

不要在循环中创建函数。

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

我知道我可以询问 codereview，但我的代码没有按预期工作。如果它可以工作，我会尝试改进它，然后我会在 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);
}