How do i highlight a specific table row depending on the url

Question

Okay lets say i have a table with first names and last names and i want to highlight the whole row depending on the url for example if i had example.com/test#namex it would highlight the whole row of the table

I tried to do this using the css that I found from here

a:target {
  transition: background-color 1s ease-in;
  -webkit-transition: background-color 1s ease-in;
  -moz-transition: background-color 1s ease-in;
  background-color: yellow;
}

<table>
  <tr id="namex">
    <td>namex</td>
    <td>namex2</td>
  </tr>

  <tr id="namey">
    <td>namey</td>
    <td>namey2</td>
  </tr>
</table>

use only `:target {}` or `tr:target {}` – Temani Afif Feb 11 '20 at 07:39 — Temani Afif, Feb 11 '20 at 07:39

mplungjan · Answer 1 · 2021-02-07T14:48:08.123

3

In CSS you need just :target (tr:target if you only want to highlight the table row and not other things with ID)

:target {
  transition: background-color 1s ease-in;
  -webkit-transition: background-color 1s ease-in;
  -moz-transition: background-color 1s ease-in;
  background-color: yellow;
}

If you want, you can use JavaScript to do it too

Assuming the ID matches the hash, add this to the head of your page

<script>
var srch = window.location.search;
document.querySelector(srch).style.background = "yellow";
</script>

Working Examples are here - note I had to set the var srch = "#namex"; in the examples because StackOverflow will have another hash value

var srch = "#namex"; // change to window.location.search;
document.querySelector(srch).style.background = "yellow";

<table>
<tr id="namex">
     <td>namex</td>
     <td>namex2</td>
</tr>

<tr id="namey">
     <td>namey</td>
     <td>namey2</td>
</tr>
</table>

Or this

var srch = "#namex"; // change to window.location.search;
document.querySelector(srch).classList.add("highlight")

.highlight {
  transition: background-color 1s ease-in;
  -webkit-transition: background-color 1s ease-in;
  -moz-transition: background-color 1s ease-in;
  background-color: yellow;
}

<table>
<tr id="namex">
     <td>namex</td>
     <td>namex2</td>
</tr>

<tr id="namey">
     <td>namey</td>
     <td>namey2</td>
</tr>
</table>

edited Feb 07 '21 at 14:48

answered Feb 11 '20 at 07:24

mplungjan

169,008
28
173
236

1

Yes, i did not see IDs. I had saw just `textContent` – Ritesh Khandekar Feb 11 '20 at 07:28
Sorry what language is that in? Sorry im still kinda new to all this. – sionTea Feb 11 '20 at 07:35
@sionTea Please see my updated answer for how to implement the JavaScript I wrote – mplungjan Feb 11 '20 at 07:39
@mplungjan hmm well i didn't get it to work i put that `var srch = "#namex"; // change to window.location.search; document.querySelector(srch).style.background = "yellow";` in a – sionTea Feb 11 '20 at 07:42
1

we don't really need JS. He simply need to read carefully the question he linked ... – Temani Afif Feb 11 '20 at 07:43
@sionTea - I did not notice the a: - try just `:target` – mplungjan Feb 11 '20 at 07:43

How do i highlight a specific table row depending on the url

1 Answers1