Brandon Brandon - 11 days ago 5
CSS Question

Use .prev() to show previous column

I have an HTML table where I basically have columns broken up into sets of 3. The first 2 columns carry the css display:none; to hide them, the 3rd column is visible. (3rd columns made yellow in snippet to make things visually easier to understand) My goal is that when I mouseover any td in the 3rd column, the first 2 columns appear. My thought was to use

$("td").hover(function(){
$(this).prev().removeClass('hidetd');
});


to make the previous column visible again, but it only refers to the previous td so this does not work.

Is there anything in jQuery that I could use that would select the whole column instead of just that td? Ive done a good bit of searching online without any luck.

In the snippet below I purposely did not include the .hidetd css because I thought it would be easier to understand when seeing them. Adding a simple

.hidetd{
display:none;


}

in the CSS section will make those columns disappear. I am also aware that the colspan="3" will need to be removed and only added to the column when it is moused over. Hopefully the below snippet is easy to understand though.



table,th, td {

border: 1px solid black;
border-collapse: collapse;

}

.yellowbr {
background-color:yellow;
}

<table>
<tr>
<th>Item #</th>
<th colspan='3'>100017</th>
<th colspan='3'>100018</th>
<th colspan='3'>100019</th>
<th colspan='3'>100020</th>
</tr>
<tr>
<th>Component</th>
<th colspan='3'><u>Potato chips</u></th>
<th colspan='3'><u>butterfingers</u></th>
<th colspan='3'><u>Flat Pretzels</u></th>
<th colspan='3'><u>Milk Chocolate</u></th>
</tr>
<tr>
<th>2016-01-03</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-04</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-05</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-06</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-07</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
</table>

</div>




Answer

You can use prevAll() and then slice to get just the two previous items, like this:

$('.yellowbr').hover(function() {
  $(this).prevAll().slice(0, 2).toggleClass('light')
})

$('.yellowbr').hover(function() {
  $(this).prevAll().slice(0, 2).toggleClass('light')
})
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.light {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th colspan='3'>100017</th>
    <th colspan='3'>100018</th>
    <th colspan='3'>100019</th>
    <th colspan='3'>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan='3'><u>Potato chips</u>
    </th>
    <th colspan='3'><u>butterfingers</u>
    </th>
    <th colspan='3'><u>Flat Pretzels</u>
    </th>
    <th colspan='3'><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

</div>


To select the entire column you can use index as reference something like this:

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function(){
    $('td',this).slice(sel-3,sel-1).toggleClass('light')
  })
})
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.light {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th colspan='3'>100017</th>
    <th colspan='3'>100018</th>
    <th colspan='3'>100019</th>
    <th colspan='3'>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan='3'><u>Potato chips</u>
    </th>
    <th colspan='3'><u>butterfingers</u>
    </th>
    <th colspan='3'><u>Flat Pretzels</u>
    </th>
    <th colspan='3'><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

</div>

Comments