<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简约表格插件</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js"></script>
<style>
#root, #text, #textOne, #textEmpty {
word-spacing: 0.5em
}
#text, #textOne, #textEmpty {
display: none;
}
</style>
</head>
<body>
<div id="root" style="width: 800px"></div>
<span id="text"></span>
<span id="textOne"></span>
<span id="textEmpty"> </span>
<script type="text/javascript">
$('#root').tableXR({
//表格标题
title: '学生成绩列表',
//表格头部设置
columns: [
{data: 'name', title: '名字'},
{data: 'age', title: '年龄'},
{data: 'store', title: '得分'},
{data: 'level', title: '特点'},
],
//表格数据：
data: [
{name: '小红', age: '18', store: '98', level: '爱思考 爱劳动 不爱吃饭 不爱打游戏'},
{name: '小化', age: '18', store: '97', level: '爱吃好吃的 不爱学习 聪明 不爱劳动'},
{name: '小杰', age: '15', store: '95', level: '喜欢逗人笑 捣蛋鬼 爱讲段子 鬼马'},
{name: '小刚', age: '17', store: '95', level: '无厘头 有创造力 爱发明奇奇怪怪的东西'},
{name: '大水', age: '23', store: '97', level: '爱思考 爱劳动 不爱吃饭 不爱打游'},
{name: '小胡', age: '22', store: '88', level: '爱吃好吃的 不爱学习 聪明 不爱劳'},
{name: '热热', age: '19', store: '90', level: '喜欢逗人笑 捣蛋鬼 爱讲段子 鬼马'},
{name: '二娃', age: '17', store: '92', level: '无厘头 有创造力 爱发明奇奇怪怪的'},
{name: '小瑟', age: '16', store: '89', level: '无厘头 有创造力 爱发明奇奇怪怪的东西'},
{name: '滑板', age: '15', store: '91', level: '爱吃好吃的 不爱学习 聪明 不爱劳'},
{name: 'Ddd', age: '17', store: '95', level: '喜欢逗人笑 捣蛋鬼 爱讲段子 鬼马'},
{name: 'DSD', age: '17', store: '95', level: '无厘头 有创造力 爱发明奇奇怪怪的东西'},
{name: 'DSD', age: '17', store: '95', level: '喜欢逗人笑 捣蛋鬼 爱讲段子 鬼马'},
{name: 'DSD', age: '17', store: '95', level: '爱思考 爱劳动 不爱吃饭 不爱打游戏'},
]
})
$("#root").on("dblclick", "td", function (e) {
//双击时选中的文本
let selectText = getSelectText();
//td的文本
let text = $(this).html();
let textArray = text.split(" ");
//选中的文本 可能所在的区域
let selectArray = textArray.filter(item => {
return item.indexOf(selectText) > -1;
})
if (selectArray.length === 0) {
//选中的是空格 并未双击在文字上 清除选中后直接return；
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
return;
}
console.log(selectArray.length)
//当只有一个时直接用
if (selectArray.length === 1) {
//选中的文本
selectText = selectArray[0];
let startIndex = text.indexOf(selectText);
setSelectText(this.firstChild, startIndex, startIndex + selectText.length);
return;
}
//点击td的位置
let offsetX = e.offsetX;
//放入一个div里 计算该文本在该样式下的宽度
$("#text").html(text);
$("#textOne").html(text.substr(0, 1));
let textWidth = $("#text").width();
//该td的宽度
let width = $(this).width();
//取的左边的距离，因为是居中，所以这里用总宽度减去文本宽度 再除以2
let left = (width - textWidth) / 2;
//点击文本的位置
let textOffsetX = offsetX - left;
//一个文字所占宽度
let textOneWidth = $("#textOne").width();
let textEmptyWidth = $("#textEmpty").width();
//计算每段文字所在位置
let array = [];
for (let i = 0; i < textArray.length; i++) {
let p = {
textOffsetStart: i === 0 ? 0 : array[i - 1].textOffsetEnd + textEmptyWidth,
textOffsetEnd: i === 0 ? textArray[i].length * textOneWidth :
textArray[i].length * textOneWidth + array[i - 1].textOffsetEnd + textEmptyWidth
}
array.push(p);
}
for (let i = 0; i < array.length; i++) {
if (array[i].textOffsetStart <= textOffsetX && array[i].textOffsetEnd >= textOffsetX) {
//选中的文本
selectText = textArray[i];
let startIndex = text.indexOf(selectText);
setSelectText(this.firstChild, startIndex, startIndex + selectText.length);
}
}
});
function getSelectText() {
let text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type !== "Control") {
text = document.selection.createRange().text;
}
return text;
}
function setSelectText(node, startIndex, endIndex) {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// window.find(text);
if (document.body.createTextRange) {
let range = document.body.createTextRange();
range.setStart(node, startIndex);
range.setEnd(node, endIndex);
} else if (window.getSelection) {
let selection = window.getSelection();
let range = document.createRange();
range.setStart(node, startIndex);
range.setEnd(node, endIndex);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand("Copy");
}
</script>
</body>
</html>
主要采用两个解决方案
1、先获取双击时自动选中的文本，然后判断该文本处于整段文本中什么位置，如果只出现在该文本中一次，则直接选中该段文本
2、当自动选中的文本在整段文本中出现多次，则根据双击时的坐标计算出点击的位置的文本是什么，主要是根据计算整段文本宽度，单个文字宽度，空格宽度，最后按照规律算出。
复制方法在setSelectText函数最下方。
如果能帮到你，望【采纳】
