如何在DataTable中实现点击/聚焦时高亮选中单元格内容？

这个需求其实挺实用的，尤其是需要快速复制单元格内容的时候，我来给你详细的实现方案，覆盖普通文本单元格和包含输入框的场景：

核心思路 #

通过给DataTable的单元格绑定**点击（click）和聚焦（focus）**事件，在事件触发时选中单元格内的内容——对于输入框直接调用select()方法，对于普通文本则用浏览器的Selection API来选中。

针对jQuery DataTables的实现代码 #

1. 基础HTML结构 #

假设你的表格ID是example：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <!-- DataTable会自动填充数据行 -->
    </tbody>
</table>

2. JavaScript逻辑 #

因为DataTable会动态渲染分页、搜索后的行，所以必须用事件委托来绑定事件，避免动态生成的单元格失效：

$(document).ready(function() {
    // 初始化DataTable
    const table = $('#example').DataTable();

    // 给所有单元格添加tabindex，让它们可以通过Tab键聚焦
    $('#example td').attr('tabindex', '0');

    // 绑定点击和聚焦事件
    $(document).on('click focus', '#example td', function(e) {
        // 优先处理单元格内的输入框
        const inputElement = $(this).find('input')[0];
        if (inputElement) {
            inputElement.select();
            return;
        }

        // 处理普通文本单元格的内容选中
        const range = document.createRange();
        range.selectNodeContents(this); // 选中当前单元格的所有内容
        const selection = window.getSelection();
        selection.removeAllRanges(); // 清除之前的选中状态
        selection.addRange(range); // 应用新的选中范围
    });
});

优化与扩展 #

• 指定列生效：如果只需要特定列支持选中，可以给目标列的单元格加自定义class（比如selectable-cell），然后把事件选择器改成#example td.selectable-cell。
• React/Vue等框架下的适配：思路完全一致，只是绑定事件的方式不同。比如React中，你可以在单元格组件上绑定onClick和onFocus事件，然后在事件处理函数中执行相同的选中逻辑：

const handleCellSelect = (e) => {
  const input = e.currentTarget.querySelector('input');
  if (input) {
    input.select();
    return;
  }
  const range = document.createRange();
  range.selectNodeContents(e.currentTarget);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
};

// 单元格渲染
<td onClick={handleCellSelect} onFocus={handleCellSelect} tabIndex="0">
  {cellValue}
</td>

注意事项 #

• 给单元格加tabindex="0"是为了让它能通过Tab键获得焦点，从而触发focus事件；如果不需要聚焦触发，可以去掉这一步和focus事件绑定。
• 部分浏览器可能对Selection API的细节有差异，但上面的写法是兼容性较好的实现方式。

内容的提问来源于stack exchange，提问作者Fabio