如何在动态范围的元素上添加类-jQuery

Question

I'm trying to make Date Range Picker similar to this .

I've tried using things like

     $('#calendar-dates').on('mouseover', 'td', function() {
         if($(this).html() > window.start){
          $(this).addClass("added");
        }
     });

      $('#calendar-dates').on('click', 'td', function() {
        window.start = $(this).html(); // get the number of the day

        $(this).addClass("start"); // to mark it the date-selection start

      });

What I want is if I go horizontally with the mouse button over the td elements that come after this day , to highlight them with a background-color

OR

if I go vertically to change the background-color of the previous row.

I have read about slice but I can't think to understand how to utilize it properly.

Also using mouseover , after a point it stops highlighting elements.

Please help.

Answer 1

you can try this.

$( "#calendar-dates" ).mouseover(function() {
       // do something 
}).click(function() {
      // do something 
});