Hovering on one table cell will highlight previous cells in a row

Question

I have a table with different cell size. I was trying to make something like if I hover a cell, only previous cells in a row will be highlighted.

JS FIddle

From the example you will see that Item + Item a + item j have gray background it explain that I am now hovering on cell "item j" and previous cells are also highlighted.

Like this if I hover on the item b it will highlight item b, item a and item. if I hover on the first cell item it will only highlight on item as there is no previous cell.

Also same for the Item 1 , item 2 and item 3.

I am not good in jQuery and because of that I failed to build any logic to create this.

If anyone helps me on this that would be much helpful for me.

HTML

<table class="table-style" width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr>
         <td class="active" rowspan="4"><p><a href="#">Item</a></p></td>
         <td ><p><a href="#">Item 1</a></p></td>
         <td ><p><a href="#">Item 2</a></p></td>
         <td ><p><a href="#">Item 3</a></p></td>
      </tr>
      <tr>
         <td class="active" rowspan="3"><p><a href="#">Items a</a></p></td>
         <td class="active" rowspan="3"><p><a href="#">Items b</a></p></td>
         <td ><p><a href="#">Items i</a></p></td>
      </tr>
      <tr>
        <td class="active"><p><a href="#">Items j</a></p></td>
      </tr>
      <tr>
        <td><p><a href="#">Items k</a></p></td>
      </tr>
  </table>

CSS

.table-style{
    margin-bottom:15px;
}

.table-style td{
    border-collapse: collapse;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px 0px;
}

.table-style td p {
    font-size: 13px;
    color: #454545;
    font-weight: normal;
}

.table-style td p a {
    color: #8d8d8d;
    text-decoration:none;
}

.table-style td.active{
    background: #ddd;
    border: solid 2px #C9C9C9;
}

.table-style td.active p a{
    color: #000;
    font-weight:bold;

}    

.table-style td p a:hover {
    color: #000;
    text-decoration:underline;
}

[Sorry for my bad English]

Answer 1

I've modified your fiddle so that it works now here: http://jsfiddle.net/BHVv6/4/

Your table cells are organized in a weird way where it's hard to get a clear idea of who the parents are so I had to map out the parent structure manually by using this:

parentMap = {
    "itemOrig": false,
    "item1": "itemOrig",
    "item2": "item1",
    "item3": "item2",
    "itemI": "itemB",
    "itemJ": "itemB",
    "itemK": "itemB",
    "itemB": "itemA",
    "itemA": "itemOrig"
};

Answer 2

You can define a class that gets applied to all previous table-cells when one is hovered like this:

jQuery

$('.table-style td').hover(
    function(){
        $(this).prevAll().addClass('hover');
    }, 
    function(){     
        $(this).prevAll().removeClass('hover');
    }
);

CSS

.hover{font-weight: bold} /* or whatever  the "highlighting needs to be */