突出显示 DataTable 中的单元格内容答案

【问题标题】：Highlight cell content in DataTable突出显示 DataTable 中的单元格内容
【发布时间】：2018-05-25 14:12:01
【问题描述】：

我想突出显示焦点/单击它的单元格内容。例如我想要的东西

<input onclick="this.select()"/>

在我的数据表上。我该怎么做？

【问题讨论】：

来自文档：datatables.net/extensions/select/examples/initialisation/…

标签： javascript php jquery datatables

【解决方案1】：

来自文档...

JS代码：

$(document).ready(function() {
    $('#example').DataTable( {
        select: {
            style: 'os',
            items: 'cell'
        }
    } );
} );

加载以下 JQ 库：

https://code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js

为 CSS 加载以下库：

https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css

【讨论】：

也许我的问题不清楚，因为我必须更改单元格内的值，所以，我希望在单元格上单击（现在它是可编辑的，因为它是一个输入框）可以突出显示文本内容...
如果你想使用他们的服务，你需要数据表编辑器。不过那部分不是免费的：editor.datatables.net
如果您不想使用数据表，请查看：stackoverflow.com/questions/23572428/…
很高兴你完成了你想要的。使用数据表时，我通常会尝试使用它们提供的库。
@Fabio 不要忘记接受您自己的解决方案。有一个徽章可以回答您自己的问题。 =)

【解决方案2】：

$('#table tbody').on('click', 'td', function(){
    this.firstElementChild.select();
});

这是我的解决方案，效果很好！

【讨论】：

【解决方案3】：

为此使用 CSS

user-select

    td{
      user-select:all;
    }

    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

【讨论】：

您阅读我的问题了吗？这不是我问@Janusz 的问题，我的问题不同，我找到了解决方案！还是谢谢