Use jQuery to add class to next table cell in the column

Question

I am creating some special hover effects for FullCalendar version 3. The way it is generated now has a single day split into separate tables making it a bit of a challenge to add hover effects with CSS. I have most of this working but one last little bit and I'm not sure how to get what I need.

Here is a bit of sample code for a single week:

This is the first table, the background of the cell.

This is the 2nd table, with the top of the cell in the thead and the events listed in the tbody:


    
      
        
          
            1
          
          
            2
          
          
            3
          
          
            4
          
          
            5
          
          
            6
          
          
            7
          
        
      
      
        
          
            
            
              All Day Event
            
          
          
          
          
          
          
          
            
            
              Long Event

Ok, so I have created a bit of jQuery to add a hover effect when the fc-day or fc-day-top classes are hovered. It looks like this:

$('.fc-day, .fc-day-top').hover(function() {
            var myEm = $(this).attr('data-date');
                $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').addClass('on-hover');
          }, function() {
                var myEm = $(this).attr('data-date');
            $('.fc-day-top[data-date = '+myEm+'] .fc-day-number').removeClass('on-hover');
          });

Now the last part I need, is to be able to index the cell that is being hovered, and apply a class to the same column td in the tbody section of the 2nd table. Basically, I am applying the hover effect 3 times because of the way each day is output.

So when I hover in the first column of the 2nd table body, how can I index that so I can apply the necessary css for the corresponding columns?

Mark Schultheiss · Accepted Answer

Example to highlight headers of each table based on index.

$('.fc-day, .fc-day-top').hover(function() {
  let myEm = $(this).attr('data-date');
  let myIndex = $(this).index();
  let targets = $('.fc-day');
  let targets1 = $('.fc-day-top');
  targets.add(targets1).removeClass('show-me');

  // console.log(myIndex);
  $('.fc-day').text(myIndex);
  targets.eq(myIndex).addClass('show-me');
  targets1.eq(myIndex).addClass('show-me');
  $('.fc-day-top[data-date = ' + myEm + '] .fc-day-number').addClass('on-hover');
}, function() {
  let myEm = $(this).attr('data-date');
  let myIndex = $(this).index();
  let targets = $('.fc-day');
  let targets1 = $('.fc-day-top');
  targets.add(targets1).removeClass('show-me');
  targets.eq(myIndex).addClass('show-me');
  targets1.eq(myIndex).addClass('show-me');
  $('.fc-day').text(myIndex);
  $('.fc-day-top[data-date = ' + myEm + '] .fc-day-number').removeClass('on-hover');
});

table.secondtable>tbody>tr>td,
.fc-day-top,
.fc-day {
  border: solid lime 1px;
  width: 2em;
  height: 2em;
}

.show-me {
  border: solid green 1px;
}



  
    
      
      
      
      
      
      
      
    
  




  
    
      
        
          1
        
        
          2
        
        
          3
        
        
          4
        
        
          5
        
        
          6
        
        
          7
        
      
    
    
      
        
          
            
              All Day Event
            
          
        
        
        
        
        
        
        
          
            
              Long Event

Use jQuery to add class to next table cell in the column

Answers (1)

Related Questions