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

Question

我想突出显示焦点上的单元格内容/点击它。例如，我会像

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

在我的DataTable上。我怎么能这样做？

Answer 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

Answer 2

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

这是我的解决方案，它运作良好！

Answer 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>