1

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?

Fabio
  • 85
  • 1
  • 2
  • 14

3 Answers3

0

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
Statik Stasis
  • 308
  • 1
  • 5
  • 16
  • Maybe my question is not clear by the way I have to change the value inside the cell so, I'd like that onclick on the cell (now it's editable because it's an inputbox) could highlight the text content... – Fabio May 25 '18 at 14:50
  • Then you need Editor by datatables if you're wanting to use their service. That part is not free though: https://editor.datatables.net/ – Statik Stasis May 25 '18 at 14:51
  • If you don't want to use datatables check this out: https://stackoverflow.com/questions/23572428/making-row-editable-when-hit-row-edit-button – Statik Stasis May 25 '18 at 14:54
  • I don't need editor but I have to add this code inside the click function: this.firstElementChild.select(); – Fabio May 25 '18 at 14:55
  • That's what editor does- you click the cell, it changes the cell to a field so you can edit it and change the contents. After you go to the link see the 3 different examples it provides for this on the side. The cell it displays is a demo you can try it out. – Statik Stasis May 25 '18 at 14:59
  • Click the in-line editing demo it has. That is what you're wanting to do. – Statik Stasis May 25 '18 at 15:00
  • Why I should to pay for something that I can do for free?? The datatables edito is a good plugin and I tried it but, If I can I prefer to build my plugins or utilities by myself. – Fabio May 25 '18 at 15:04
  • 1
    Glad you accomplished what you wanted. When using datatables I usually try to use the libraries they provide. – Statik Stasis May 25 '18 at 15:08
  • 1
    @Fabio Don't forget to accept your own solution. There is a badge for answering your own question. =) – Statik Stasis May 25 '18 at 15:11
0
$('#table tbody').on('click', 'td', function(){
    this.firstElementChild.select();
});

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

Fabio
  • 85
  • 1
  • 2
  • 14
0

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>
Janusz
  • 21
  • 3
  • Did you read my question? That's not what did I ask @Janusz, my question was different and I found the solution! Thanks anyway – Fabio May 25 '18 at 15:34