Is there any way of highlighting entire row on hover when there are fixed columns

anadi

I found this solution --
https://datatables.net/forums/discussion/13856/highlighting-entire-row-on-hover-with-fixed-columns

Is there any other way of doing this.

allan

Not really. It can't be done with CSS alone since the fixed column is floating on top of the original table and is not transparent (you could make it transparent, but it would look really ugly).

It has to be done with a bit of Javascript. Exactly how it is done can vary by implementation, but basically you would apply classes to the floating part on mouse over of the main.

Allan

anadi

Thanks Allan..so far I have done with the help getting from the link..

miguelmich

I made some adjustments because that code will trigger tr hover on all tables if you have multiple instances in the same page:

      $(document).on({
        mouseenter: function (event) {
          var table = $(event.target).parents('.dataTables_wrapper').find('table.dataTable');
          trIndex = $(this).index() + 1;
          table.find("tr:eq(" + trIndex + ")").addClass("hover");
        },
        mouseleave: function (event) {
          var table = $(event.target).parents('.dataTables_wrapper').find('table.dataTable');
          trIndex = $(this).index() + 1;
          table.find("tr:eq(" + trIndex + ")").removeClass("hover");
        }
      }, ".dataTables_wrapper tbody tr");

colin

Ah I see. The best bet would be to do something like this. It's a generic function that finds the table that clicked, then gets the index of the row.

Colin