我发现了一个很好的脚本来突出显示html表行,它工作得很好:
http://nerds-central.blogspot.ca/2006/12/selectable-table-rows-with-html-and.html
我更改了onmouseover的onclick事件,并添加了几行来选择一个单元格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的现场演示。(fiddle演示了一种替代代码,它与IE不太兼容。)
另一个演示,它以某种方式实现了通过上下文菜单复制单元格。这只适用于FF26、Chrome31和IE11,尽管如果省略/重建所选单元格的类切换,则代码应该是IE9+可战斗的。