Marcin Polkowski Marcin Polkowski - 1 month ago 6
HTML Question

Highlight multiple rows with specific ID's

Looking for solution to highlight elements in table, with specyfic ID's on hover.

My code



$('#orderstable').hover(function()
{
$('#id_1').find('td').addClass('hover');
}, function()
{
$('#id_1').find('td').removeClass('hover');
});

#orderstable td
{
padding:0.7em;
border:#969696 1px solid;
}

.hover
{
background:yellow;
}

<table id="orderstable">
<thead>
<tr>
<th>Proces</th>
<th>Step 1</th>
<th>Step 2</th>
<th>Step 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proces 1</td>
<td id='order_2'>job 2</td>
<td id='order_1'>job 1</td>
<td id='order_3'>job 3</td>
</tr>
<tr>
<td>Proces 2</td>
<td id='order_3'>job 3</td>
<td id='order_4'>job 4</td>
<td id='order_1'>job 1</td>
</tr>
</tbody>
</table>





What I'm trying to archieve is when you hover mouse over td cell with id='order 1', it will highlight this and also other td's with id='order_1'.
Of course, I need same functionality for other id's (order_2, order_3 etc).

Any idea?

Answer

I would recommend using classes instead, however to answer your question you can achieve this by using the nth child css pseudo.

I created a quick JSFiddle here as an example https://jsfiddle.net/fzjuxyeL/1/

#order_1:nth-child(1n+1)
// Start at 1 and increment by 1 finding all divs with ID

$('#order_1').hover(function(){
    $('#order_1:nth-child(1n+1)').toggleClass('toggled')
});
// Applies class to all divs with specified ID when hovered