How do I change the class of several tds when hovering over one of them?

debugcn Published at Dev

NickEckhart

here's my problem. I have a month-view type calendar in a table. In this calendar there can be certain periods which are (they have the class 'blocked'). The first date of such a period has the class 'blocked' as well as 'start', while the last date has the classes 'blocked' and 'end'.

Now, when I hover over one of these TDs I want that td, and all the other ones in ONLY THAT SPECIFIC period (can be over multiple rows), to get the class 'blocked-highlight'.

Here is a JSFiddle which generally shows what I have: http://jsfiddle.net/aoxmpouw/

Here is the Code from the Fiddle:

RELEVANT PART OF HTML:

        ...     
        <td>13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
        <td class="blocked start">17</td>
        <td class="blocked">18</td>
        <td class="blocked">19</td>
        <td class="blocked">20</td>
        <td class="blocked">21</td>
    </tr>
    <tr>
        <td class="blocked">22</td>
        <td class="blocked">23</td>
        <td class="blocked end">24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        ...

JS:

$( document ).ready(function() {
    $("td.blocked").hover(
        function() {
            $( this ).addClass('blocked-highlight')
        }, function() {
            $( this ).removeClass('blocked-highlight')
        }
    );
});

CSS:

.blocked {
    color: white;
    background-color: red;
}

.start {
    border-left: 5px solid black;
}

.end {
    border-right: 5px solid black;
}

.blocked-highlight {
    background-color: blue;
}

JQuery is perfectly fine, as well as pure CSS solutions, if there are any.

Thanks in advance, Cheers -N

Jeroen

If you have multiple periods / blocks and they are generated dynamically. give them a shared attribute or class. Then you could do something like:

HTML:

   ...     
    <td>13</td>
    <td>14</td>
</tr>
<tr>
    <td>15</td>
    <td>16</td>
    <td class="blocked start" rel="1">17</td>
    <td class="blocked" rel="1">18</td>
    <td class="blocked" rel="1">19</td>
    <td class="blocked" rel="1">20</td>
    <td class="blocked" rel="1">21</td>
</tr>
<tr>
    <td class="blocked" rel="1">22</td>
    <td class="blocked" rel="1">23</td>
    <td class="blocked end" rel="1">24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    ...

JS:

   $( document ).ready(function() {
      $("td.blocked").hover(
       function() {
        rel = $(this).attr('rel');
        $( "td[rel='"+rel+"']").addClass('blocked-highlight');
       }, function() {
        rel = $(this).attr('rel');
        $( "td[rel='"+rel+"']").removeClass('blocked-highlight');            
       }
    );
});

Demo: http://jsfiddle.net/aoxmpouw/5/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-2

Comments

0 comments

From Dev

Related Related

Article