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");
    }
});

自动编号HTML中的表格/数字

1 个答案: