layui表格单元格默认不支持点击全选文字，因td不可编辑且非聚焦；推荐用contenteditable="true"配合range api实现点击高亮，需监听click/focus/keydown并委托事件防丢失。
默认情况下，layui 表格单元格内的文字无法被鼠标点击后自动全选——因为单元格是只读展示区域，dom 节点既不聚焦也不支持原生文本选择行为。要实现「点击即高亮选中文字」，本质是让浏览器进入可编辑状态或手动触发文本选择逻辑，而非依赖表格自身的交互机制。
为什么直接给 td 加 onclick 不生效
常见错误是给 .layui-table-body td 绑定 onclick，然后调用 document.execCommand('selectAll') 或类似操作。这行不通，原因有三：
-
td默认不是可编辑元素，execCommand在非contenteditable或非聚焦的上下文中被禁用（现代浏览器已弃用该 API） - Layui 渲染后会动态重绘 DOM，手动绑定的事件容易丢失
- 单元格内可能含 HTML 标签（如
<span></span>、<em></em>），直接选中整个td会把标签也选进去，体验怪异
推荐方案：用 contenteditable="true" + 禁用编辑副作用
这是最轻量、兼容性最好、且无需额外库的方式。核心思路是临时让单元格变成可编辑态，触发浏览器原生选中逻辑，再立刻阻止输入行为。
- 在
cols配置中为需要高亮的列加templet，包裹内容并设contenteditable="true" - 监听
click和focus，点击时立即执行getSelection().selectAllChildren(el) - 必须同时监听
keydown并preventDefault()，否则用户真能输进去字符 - 别忘了加 CSS：
td[contenteditable] { outline: none; cursor: text; }，否则点击没反馈
templet: function(d) {
return '<div contenteditable="true" style="outline:none;cursor:text;">' +
(d.title || '') +
'</div>';
}
然后在 done 回调里统一绑定事件（避免重复绑定）：
done: function() {
layui.$('td div[contenteditable]').on('click', function(e) {
e.stopPropagation();
const el = this;
window.getSelection().removeAllRanges();
const range = document.createRange();
range.selectNodeContents(el);
window.getSelection().addRange(range);
}).on('keydown', function(e) {
e.preventDefault();
});
}
替代方案：用 Range 手动选中文本节点（适合纯文本列）
如果列内容确定不含 HTML（比如全是数字、日期、ID），且你不想引入 contenteditable 的潜在样式干扰，可用原生 Range API 精确控制。
- 先用
$(td).text()提取纯文本，再创建Text节点 - 注意：不能直接对
td调用selectNodeContents，它会选中所有子节点（包括空格、换行符） - 需遍历
td.childNodes，找到第一个Node.TEXT_NODE类型的节点再选中 - 移动端需额外处理
touchstart，否则点击无响应
关键代码片段：
layui.$('td').on('click', function() {
const textNode = Array.from(this.childNodes).find(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim());
if (textNode) {
const range = document.createRange();
range.selectNodeContents(textNode);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
});
最容易被忽略的是：表格启用分页或重载后，上述事件绑定会失效。必须把事件委托挂到表格容器上，或者每次 done 里重新绑定；另外，contenteditable 方案在 skin: 'line' 下可能因边框遮挡导致点击区域变小，建议加 padding 和 pointer-events: auto 保底。
