I have a table as follows in HTML:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</table>
At the moment, I have a rollover and click on the entire row so when I move over it with my mouse the background color changes and when I click on any column an event happens.
My question is as follows, I now see that it would be helpful to change this layout and upon mouseover only highlight columns 3-5 and the click there would execute the same event but when I click on a name in column one or column 2 it would go to the URL for that name.
Essentially, I am trying to find out if it is possible to limit the table row highlight to just columns 3-5 and then have a click on any of those columns trigger the event.
Would the solution be to put rows 3-5 inside a span? That does not seem to work.
How abt using :gt() selector. From the docs :
Select all elements at an index greater than index within the matched set.
Note that gt is zero based, so to highlight columns 3 -5, you'll need to use index as 1.
JS :
$("tr").on("mouseover mouseout", function () {
$(this).find("td:gt(1)").toggleClass("highlight");
});
CSS
.highlight {
background-color: aqua;
}
Demo