jquery - Table with rowspan and hovering -

i have troubles table lot of td rowspan. i've constructed it, mixing ideas other posts.

on mouse over, need information related office hovered. example, if select paris, continent, country , other related info should come in red colour.

as can see in fiddle, works expected except rows of germany , canada.

https://jsfiddle.net/ppgoecjj/

html:

<table class="mytable">     <tbody>         <tr>             <td rowspan="4">                 north america             </td>             <td rowspan="4">                 4             </td>             <td rowspan="2">                 usa             </td>             <td>                 ohio             </td>             <td>                 office             </td>             <td rowspan="4">                 open             </td>         </tr>         <tr>             <td>                 new york             </td>             <td>                 office             </td>         </tr>         <tr>             <td rowspan="2">                 canada             </td>             <td>                 toronto             </td>             <td>                 office             </td>         </tr>         <tr>                        <td>                 ottawa             </td>             <td>                 office             </td>         </tr>         <tr>             <td rowspan="3">                 europe             </td>             <td rowspan="3">                 3             </td>                             <td>                 france             </td>             <td>                 paris             </td>             <td>                 office             </td>             <td rowspan="3">                 open             </td>         </tr>         <tr>             <td rowspan="2">                 germany             </td>                         <td>                 berlin             </td>             <td>                 office             </td>         </tr>         <tr>             <td>                 munich             </td>             <td>                 office             </td>         </tr>         <tr>             <td>                 south america             </td>             <td>                 1             </td>             <td>                 argentina             </td>             <td>                 buenos aires             </td>             <td>                 office             </td>             <td>                 open             </td>         </tr>         <tr>             <td rowspan="2">                 asia             </td>             <td rowspan="2">                 2             </td>             <td rowspan="2">                 china             </td>             <td>                 shanghai             </td>             <td>                 office             </td>             <td rowspan="2">                 open             </td>                         </tr>         <tr>             <td>                 beijing             </td>             <td>                 office             </td>          </tr>     </tbody> </table> 

css:

body     {         padding: 50px;     }     table     {         width: 100%;         border-collapse: collapse;     }     td, th     {         padding: 20px;         border: 1px solid black;     }     .hover     {         background: red;     } 

jquery:

$(function () {         $("td").hover(function () {             $el = $(this);             $el.parent().addclass("hover");             var tdindex = $('tr').index($el.parent());             if ($el.parent().has('td[rowspan]').length == 0) {                 $el.parent().prevall('tr:has(td[rowspan]):first')                         .find('td[rowspan]').filter(function () {                             return checkrowspan(this, tdindex);                         }).addclass("hover");             }         }, function () {             $el.parent()     .removeclass("hover")     .prevall('tr:has(td[rowspan]):first')     .find('td[rowspan]')     .removeclass("hover");         });     });     function checkrowspan(element, pindex) {         var rowspan = parseint($(element).attr('rowspan'));         var cindex = $('tr').index($(element).parent());         return rowspan >= pindex + 1 || (cindex + rowspan) > pindex;     }