0

次のような単純な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 はヘッダーのクローンを作成する場所でエラーを表示します。

ループ内で関数を作成しないでください。

2つ目はスピードです。小さなテーブルでは問題なく動作しますが、大きなテーブル (rows>2k) や古いブラウザーでは、ブラウザーがしばらくフリーズします。

コードレビューで質問できることはわかっていますが、コードが期待どおりに機能していません。それが機能する場合は、改善を試みてから、コードレビューで質問します。

4

1 に答える 1

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);
}
于 2013-05-27T11:30:51.030 に答える