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

Question

I'd like to highlight the cell content on focus/click on it. For example I would something like

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

on my DataTable. How can I do that?

Answer 1

From the documentation...

JS Code:

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

Load the following JQ libraries:

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

Load the following libraries for 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();
});

That's my solution and it's working very well!

Answer 3

Use CSS for that

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>