自动编号表/ HTML中的数字

Question

是否可以为表格或图像创建自动编号。
（对于那些熟悉MS-Word或Latex的人，其中包含类似的功能。）

详细信息：如果我创建了三个表，它将分别编号为1、2和3。如果不删除表2，则表3应该编号为2（并且对它的所有引用都应自动更新）

Answer 1

使用纯HTML是不可能的，afaik。 您应该为此使用脚本并正确格式化指向表的链接。 喜欢：

 $(function() { var tables = {}; $('table[data-referenced]').each(function() { var table = $(this); var tableRef = table.attr("data-referenced"); var number = mapIndex(tables, tableRef); if (number < 0) { // this table is first met number = mapIndices(tables) + 1; var annotation = table.attr("title"); tables[tableRef] = table; var wrapper = $('<div class="referenced-table"><a name="' + tableRef + '"></a></div>'); wrapper.insertAfter(table); wrapper.append(table); wrapper.append($('<div class="annotation">Table ' + number + '. ' + annotation + '</div>')); } $('a[href="#' + tableRef + '"]').each(function () { var link = $(this); var linkWrapper = $('<span></span>'); linkWrapper.insertAfter(link); linkWrapper.append(link); linkWrapper.append($('<sup>[<a href="#' + tableRef + '">' + number + '</a>]</sup>')); }); }); // can do some other stuff with tables map here }); function mapIndex(map, key) { var index = 0; for (var i in map) if (i == key) return index; else index++; return -1; } function mapIndices(map) { var index = 0; for (var i in map) index++; return index; } 

 .referenced-table { width: 30%; margin: 10px 5px 15px 5px; text-align: center; } .referenced-table table { width: 100%; font-family: monospace; } .referenced-table .annotation { text-align: center; } 

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> Some text.<br /> And here goes link to <a href="#some_table" class="table-link">table</a>. And another text.<br /> Some text.<br /> And here goes link to <a href="#some_table2" class="table-link">table</a>. And another text.<br /> Some text.<br /> And here goes link to <a href="#some_table3" class="table-link">table</a>. And another text.<br /> Some text.<br /> <table data-referenced="some_table" title="Table of Foo"> <tr><td>+------+</td></tr> <tr><td>| cell |</td></tr> <tr><td>+------+</td></tr> </table> Some text.<br /> <table data-referenced="some_table2" title="Table of Bar"> <tr><td>+------+</td></tr> <tr><td>| cell |</td></tr> <tr><td>+------+</td></tr> </table> Some text.<br /> <table data-referenced="some_table3" title="Table of Baz"> <tr><td>+------+</td></tr> <tr><td>| cell |</td></tr> <tr><td>+------+</td></tr> </table> 

相同的代码段，但采用jQuery插件的形式：

(function ($) {

    var defaults = {
        "wrapper-class": "referenced-table",

        reference: function (table, set) {
            return $(table).attr("name");
        },
        decorate: {
            table: function (table) {
                var annotation = this.settings("annotation");
                if (annotation) {
                    var node = $('<div>' + annotation.call(this, table) + '</div>')
                    .addClass("annotation");

                    $(table).append(node);
                }
            },
            links: function (table, links) {
                var tableRef = this.reference(table);
                var number = this.number(table);

                for (var i in links) {
                    var link = $(links[i]);
                    var linkWrapper = $('<span>')
                    .insertAfter(link)
                    .append(link.html() + " " + number)
                    .append($('<sup>[<a href="#' + tableRef + '">' + number  + '</a>]</sup>'));

                    link.remove();
                }
            }
        },
        annotation: function (table) {
            return 'Table ' + this.number(table) + ': ' + $(table).attr("title");
        }
    };

    $.fn.autonumeric = function (options) {
        var settings = $.extend(true, {}, defaults, options);

        var tables = {};

        this.settings = function (key) {
            return settings[key];
        }

        this.reference = function (table, set) {
            return settings.reference.call(this, table, set);
        }

        this.number = function (table) {
            var number = mapIndex(tables, this.reference(table)) + 1;
            if (settings.number)
                number = settings.number.call(this, table, number);
            return number;
        }

        this.decorateTable = function (table) {
            var tableRef = this.reference(table);

            if (settings.decorate.links) {
                settings.decorate.links.call(
                    this,
                    table,
                    $('a[href="#' + tableRef + '"]').toArray()
                    );
            }

            var wrapper = $('<div><a name="' + tableRef + '"></a></div>')
            .addClass(this.settings("wrapper-class"))
            .insertAfter(table)
            .append(table);

            if (settings.decorate.table)
                settings.decorate.table.call(this, table);
        }

        this.updateTable = function (table) {
            var tableRef = this.reference(table);

            var i = 0;
            var slug = tableRef;
            while (tables[slug] !== undefined) {
                slug = tableRef + "_" + (++i);
            }

            if (i > 0) {
                var oldRef = tableRef;
                tableRef = this.reference(table, slug);

                if (tableRef == oldRef) {
                    alert('Looks like there are multiple tables with reference "' + oldRef + '"');
                    return;
                }
            }

            tables[tableRef] = table;

            this.decorateTable(table);
        }

        var autonumerator = this;
        return this.each(function () {
            autonumerator.updateTable(this);
        });
    }

    mapIndex = function (map, key) {
        var index = 0;
        for (var i in map) {
            if (i == key)
                return index;
            else
                index++;
        }

        return 0;
    }

    mapIndices = function (map) {
        var index = 0;
        for (var i in map)
            index++;

        return index;
    }

})(jQuery);

用法：

// use default table-referencer (references tables by their "name" attribute)
$('table[name]').autonumeric();

// or reference tables by specific attribute
$('table[data-referenced]').autonumeric({
    reference: function (table, set) {
        if (set != undefined) { // it will try to give custom reference to table with referances clash
            // huh, same reference for two tables!
            $(table).data("referenced", set)
            // draw red border around second table
            .css({"border": "2px solid red"});
        }

        return $(table).data("referenced");
    }
});

// you also can customize annotations for tables,
// or use custom table numeration
$('table[name]').autonumeric({
    number: function (table, number) {
        return '2.' + number;
    },
    annotation: function (table) {
        // if table's "title" attribute contains annotation,
        return 'Section 2. Table ' + this.number(table) + ': ' + $(table).attr("title");
    }
});