Как правильно копировать ячейки?

Question

[Ilya Bobkov]

Привет! Сейчас делаю копирование ячеек, типа excel.
https://jsfiddle.net/gygdxo0o/
Результат копирования не правильный. Как правильно копировать?

Answer 1

[Артём]

https://jsfiddle.net/4aegcurp/

Если вам нужно, чтобы значения ячеек менялись сразу же при выделении клеток, то вот код:

$(document).ready(function () {
    var table = $('table');
    var cells = table.find('td');
    var firstCorner, secondCorner, val;

    function getCellIndex(cell) {
        return {
            x: $(cell).index(),
            y: $(cell).parent().index()
        };
    }

    function getRangeFromCorners(firstCorner, secondCorner, axis) {
        var from, to;

        if (firstCorner[axis] < secondCorner[axis]) {
            from = firstCorner[axis];
            to = secondCorner[axis];
        }
        else {
            from = secondCorner[axis];
            to = firstCorner[axis];
        }

        to = ':lt(' + ( to - from + 1 ) + ')';

        from = from > 0
            ? ':gt(' + ( from - 1 ) + ')'
            : '';

        return from + to;
    }

    function onSelectEnd() {
        cells.off('mouseover.selectRange');
        table.find('.selected')
            .removeClass('selected')
            .html(val);
    }

    cells.on('mousedown', function () {
        firstCorner = getCellIndex(this);
        secondCorner = getCellIndex(this);
        val = $(this).text();

        cells.each(function () {
            $(this).data('oldval', $(this).html());
        });

        cells.on('mouseover.selectRange', function () {
            secondCorner = getCellIndex(this);

            var rangeX = getRangeFromCorners(firstCorner, secondCorner, 'x');
            var rangeY = getRangeFromCorners(firstCorner, secondCorner, 'y');

            cells.filter('.selected').each(function () {
                $(this).removeClass('selected')
                    .html($(this).data('oldval'));
            });

            table.find('tr' + rangeY).each(function () {
                $(this).find('td' + rangeX)
                    .addClass('selected')
                    .html(val);
            });
        });

        $('body')
            .on('mouseup.removeCellListener', function () {
                $(this).off('mouseup.removeCellListener');
                onSelectEnd();
            })
            .on('mouseleave.removeCellListener', function () {
                $(this).off('mouseleave.removeCellListener');
                onSelectEnd();
            });
    });
});