Raihan Raihan - 7 months ago 10
Javascript Question

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

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

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"
};
Comments