[JavaScript] シンプルなテーブルセル生成jQueryプラグイン作った

  • このエントリーをはてなブックマークに追加

とりあえず、最低限の機能でそれなりに速いテーブル生成メソッドが欲しかったので作成。
jQuery1.7.1で動作確認。

配列突っ込むだけです。一応セル単位で属性付与できます。
append()とか使ってないのは高速化の為。セルが大量だとappend()使ってるとかなり遅くなりますので。

使い方やサンプルは下記リンク参照。
http://jsfiddle.net/Qh2Ty/

プラグインのソースはこれ。使いたい人はコピペして使って下さい。

jquery.tablecell.js

(function($) {
    /**
     * @param {Array} data
     * @return {Array}
     */
    $.fn.tableCell = function(data, header) {
        var rows = [], i, dl = data.length;

        for (i = 0; i < dl; i++) {
            rows.push(_buildRow(data[i]));
        }

        return this.html(rows.join("\n"));

        /**
         * @param {Array} row
         */
        function _buildRow(row) {
            var ret = [], i, attr, value, cell, rl = row.length;
            var format = (header === undefined || header === false)
                ? '<td{$attr}>{$value}</td>'
                : '<th{$attr}>{$value}</th>';

            for (i = 0; i < rl; i++) {
                attr = row[i].attr === undefined ? '' : ' ' + _makeAttribute(row[i].attr);
                value = row[i].value === undefined ? row[i] : row[i].value;
                ret.push(format.replace('{$attr}', attr).replace('{$value}', value));
            }
            return '<tr>' + ret.join('') + '</tr>';
        }

        /**
         * @param {Object} attr
         */
        function _makeAttribute(attr) {
            var name, ret = [];
            for (name in attr) {
                ret.push(name + '="' + attr[name] + '"');
            }
            return ret.join(' ');
        }
    };
})(jQuery);

要望あればちょっとカスタムして差し上げますよ、と。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。




コメント

コメントを残す