如何点击选中表格中用空格分开的内容（不要选中空格）
注意，翻页时也要起作用哈。（不要选中空格）
<!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{word-spacing:0.5em}
</style>
</head>
<body>
<div id="root" style="width: 800px"></div>
<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:'爱思考 爱劳动 不爱吃饭 不爱打游戏'},
]
})
</script>
</body>
</html>
注意，翻页时也要起作用哈。
PS：空格之所以比较宽，是因为设置了css（word-spacing:0.5em），所以，实际上真的是半角空格。
就是当你点击爱劳动附近时，就选中爱劳动三个字。如果同时可以复制爱劳动三个字，我就继续追加30元哈。
<!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函数最下方。
如果能帮到你，望【采纳】
你是说获取表格td里的内容？
写了个demo,双击选中td并且获取选中的值
原理是 使用浏览器的range api,参考链接： Range - Web API 接口参考 | MDN Range 接口表示一个包含节点与文本节点的一部分的文档片段。 https://developer.mozilla.org/zh-CN/docs/Web/API/Range
以下代码保存成html文件在浏览器运行即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" id="table">
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
<script>
const table=document.getElementById('table')
table.addEventListener('dblclick',(e)=>{
// 如果当前点击的是td元素
if(e.target.tagName=='TD'){
const td=e.target
const selection=window.getSelection()
// 创建一个range对象
const range=document.createRange()
// 选中td元素
range.selectNodeContents(td)
selection.removeAllRanges()
selection.addRange(range)
// 获取选中的内容
console.log(window.getSelection().toString())
}else{
return
}
})
</script>
</body>
</html>
爱思考 爱劳动 不爱吃饭 不爱打游戏
更改为
['爱思考','爱劳动','不爱吃饭','不爱打游戏']
然后用jquery遍历一下td，把他们都单独放在一个span中，css控制间距；双击时就不会选中空白了。
<!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{word-spacing:0.5em}
span{ display:inline-block;}
</style>
</head>
<body>
<div id="root" style="width: 800px"></div>
<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:'<span>爱思考</span> <span>爱劳动</span> <span>不爱吃饭</span> <span>不爱打游戏</span>'},
{name:'小化',age:'18',store:'97',level:'<span>爱吃好吃的</span> <span>不爱学习</span> <span>聪明</span> <span>不爱劳动</span>'},
{name:'小杰',age:'15',store:'95',level:'<span>喜欢逗人笑</span> <span>捣蛋鬼</span> <span>爱讲段子</span> <span>鬼马</span>'},
{name:'小刚',age:'17',store:'95',level:'<span>无厘头</span> <span>有创造力</span> <span>爱发明奇奇怪怪的东西</span>'},
{name:'大水',age:'23',store:'97',level:'<span>爱思考</span> <span>爱劳动</span> <span>不爱吃饭</span> <span>不爱打游</span>'},
{name:'小胡',age:'22',store:'88',level:'<span>爱吃好吃的</span> <span>不爱学习</span> <span>聪明</span> <span>不爱劳</span>'},
{name:'热热',age:'19',store:'90',level:'<span>喜欢逗人笑</span> <span>捣蛋鬼</span> <span>爱讲段子</span> <span>鬼马</span>'},
{name:'二娃',age:'17',store:'92',level:'<span>无厘头</span> <span>有创造力</span> <span>爱发明奇奇怪怪的</span>'},
{name:'小瑟',age:'16',store:'89',level:'<span>无厘头</span> <span>有创造力</span> <span>爱发明奇奇怪怪的东西</span>'},
{name:'滑板',age:'15',store:'91',level:'<span>爱吃好吃的</span> <span>不爱学习</span> <span>聪明</span> <span>不爱劳</span>'},
{name:'Ddd',age:'17',store:'95',level:'<span>喜欢逗人笑</span> <span>捣蛋鬼</span> <span>爱讲段子</span> <span>鬼马</span>'},
{name:'DSD',age:'17',store:'95',level:'<span>无厘头</span> <span>有创造力</span> <span>爱发明奇奇怪怪的东西</span>'},
{name:'DSD',age:'17',store:'95',level:'<span>喜欢逗人笑</span> <span>捣蛋鬼</span> <span>爱讲段子</span> <span>鬼马</span>'},
{name:'DSD',age:'17',store:'95',level:'<span>爱思考</span> <span>爱劳动</span> <span>不爱吃饭</span> <span>不爱打游戏</span>'},
]
})
$(function(){
$('#root').on('click','span', function() {
var obj=$(this).parent().parent();//获取tr元素
if(obj.find('td').index($(this).parent())==3){//点击最后一个td的时候才执行
window.alert($(this).html());
$(this).select();
$(this).css("background","pink");
}
});
});
</script>
</body>
</html>
如有帮助的，请点下采纳本答案
<!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 {
word-spacing: 0.5em
}
#root span {
margin-right: 0.5em;
}
</style>
</head>
<body>
<div id="root" style="width: 800px"></div>
<script type="text/javascript">
let 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: '爱思考 爱劳动 不爱吃饭 不爱打游戏'},
{
name: '热热',
age: '爱思考 爱劳动 不爱吃饭 不爱打游戏爱思考 爱劳动 不爱吃饭 不爱打游戏爱思考 爱劳动 不爱吃饭 不爱打游戏爱思考 爱劳动 不爱吃饭 不爱打游戏',
store: '爱吃好吃的 不爱学习 聪明 不爱劳',
level: '喜欢逗人笑 捣蛋鬼 爱讲段子 鬼马'
},
];
data.forEach(item => {
for (let key in item) {
let array = item[key].split(" ");
item[key] = '';
array.forEach(t => {
item[key] = item[key] + `<span>${t}</span>`
})
}
})
$('#root').tableXR({
//表格标题
title: '学生成绩列表',
//表格头部设置
columns: [
{data: 'name', title: '名字'},
{data: 'age', title: '年龄'},
{data: 'store', title: '得分'},
{data: 'level', title: '特点'},
],
//表格数据：
data: data
})
$("#root").on("click", "span", function (e) {
setSelectTextNew(this)
});
function setSelectTextNew(node) {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// window.find(text);
if (document.body.createTextRange) {
let range = document.body.createTextRange();
range.selectNodeContents(node);
} else if (window.getSelection) {
let selection = window.getSelection();
let range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand("Copy");
}
</script>
</body>
</html>