Highlight html table cell onclick and copy value with CTRL + C

Question

I found a nice script to highlight html table rows and it works fine :

http://nerds-central.blogspot.ca/2006/12/selectable-table-rows-with-html-and.html

I changed the onclick event for onmouseover and I added a few lines to select a cell onclick. So, I'm able to select it, to check which one is selected and get the value, but I want to copy the cell value on pressing CTRL + C without having to select the content (like in Microsoft Excel).

Just CTRL + C should be ok, but if you also have a clue to do the trick with the right-click dropdown menu, that would be awesome!

See: http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript A full cross browser compatible solution would require Flash, as most browsers to readily allow access to a computer's clipboard. — Fillip Peyton, Dec 13 '13 at 21:06

Teemu · Accepted Answer · 2013-12-14T11:08:28.407

Here's a snippet which automatically selects a cell just before copy, though it works with CTRL+C only.

window.onload = function () {
    var selected,
        selectCell = function (e) {
            var cell = e.target,
                range, selection;
            if (cell.tagName.toLowerCase() !== 'td') {
                while (cell = cell.parentElement) {
                    if (cell.tagName.toLowerCase() === 'td') {
                        break;
                    }               
                }
            }
            if (!cell || cell.tagName.toLowerCase() !== 'td') {
                return;
            }
            if (selected) {
                selected.style.backgroundColor = '';            
            }
            cell.style.backgroundColor = '#ff0';
            selected = cell;
        },
        beforeCopyCell = function (e) {
            var range, selection;
            if (!selected || !e.ctrlKey || e.which !== 67) {
                return;
            }
            selected.focus();
            selection = window.getSelection();
            selection.removeAllRanges();
            range = document.createRange();
            range.selectNode(selected);             
            selection.addRange(range);
        },
        afterCopyCell = function (e) {
            if (!selected || !e.ctrlKey || e.which !== 67) {
                return;
            }
            selection = window.getSelection();
            selection.removeAllRanges();
        },
        table = document.getElementById('table');
    table.addEventListener('click', selectCell);
    table.addEventListener('keydown', beforeCopyCell);
    document.body.addEventListener('keyup', afterCopyCell);
};

The code seems to work well in FF25, Chrome31 and IE11, but it's not working in IE<9.

A live demo at jsFiddle. (The fiddle demonstrates an alternative code, which doesn't work well with IE.)

Another demo, which somehow implements also copying the cell via contextmenu. This works in FF26, Chrome31 and IE11 only, though if omitting/rebuilding the class toggling of the selected cell, the code is supposed to be IE9+ combatible.

I found this solution really helpful too: http://forums.devshed.com/javascript-development-115/onclick-to-select-all-text-in-a-cell-825002.html and this one to change the text selection color: http://www.developerdrive.com/2013/10/how-to-change-text-selection-color-with-css/ — pmrotule, Dec 17 '13 at 14:32

Highlight html table cell onclick and copy value with CTRL + C

1 Answers1