Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.
This example shows DataTables making use of the cell().index() method to get the index of the column that is to be operated on, and then the cells().nodes() and column().nodes() methods to remove old classes and
apply the new highlighted class, respectively.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Airi Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009-10-09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012-10-13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011-06-07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012-12-02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011-05-03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011-12-12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011-12-06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |
| Name | Position | Office | Age | Start date | Salary |
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function () { var table = $('#example').DataTable(); $('#example tbody').on('mouseenter', 'td', function () { var colIdx = table.cell(this).index().column; $(table.cells().nodes()).removeClass('highlight'); $(table.column(colIdx).nodes()).addClass('highlight'); });}); |
In addition to the above code, the following Javascript library files are loaded for use in this example: