javascript - 如何根据 url 突出显示特定的表格行

Question

好吧，假设我有一个包含名字和姓氏的表格，我想根据 url 突出显示整行，例如，如果我有example.com/test#namex 它会突出显示表格的整行

我尝试使用从这里找到的 css 来做到这一点

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>

标签： javascripthtmlcss

Answer 1

在 CSS 中，您只需要 :target （如果您只想突出显示表格行而不是其他带有 ID 的内容，则为 tr:target）

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

如果你愿意，你也可以使用 JavaScript 来做

假设 ID 与哈希匹配，将其添加到页面头部

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

工作示例在这里 - 注意我必须var srch = "#namex";在示例中设置，因为 StackOverflow 将有另一个哈希值

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>

或这个

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>