繁体   English   中英

突出显示html表单元格onclick并使用CTRL + C复制值

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

我找到了一个不错的脚本来突出显示html表行,并且工作正常:

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

我将onclick事件更改为onmouseover,并添加了几行内容来选择一个单元格onclick。 因此,我能够选择它,以检查选择了哪个并获取值,但是我想在按CTRL + C时复制单元格值,而不必选择内容(例如在Microsoft Excel中)。

只需使用CTRL + C即可 ,但是如果您还可以通过右键单击下拉菜单来完成此技巧,那将非常棒!

这是一个片段,可在复制之前自动选择一个单元格,尽管它仅适用于CTRL + C。

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

该代码似乎可以在FF25,Chrome31和IE11中正常运行,但是在IE <9中则无法正常工作。

jsFiddle上的现场演示 (小提琴演示了替代代码,该代码不适用于IE。)

以某种方式实现的另一个演示也可以通过contextmenu复制该单元。 这仅适用于FF26,Chrome31和IE11,尽管如果省略/重建所选单元格的类切换,则该代码应该可以使用IE9 +。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM