Перейти к строке таблицы и выделить ее в HTML? - PullRequest
Новая
       29

Перейти к строке таблицы и выделить ее в HTML?

0 голосов
/ 11 октября 2018

Я получил длинную таблицу, и разные записи связаны друг с другом, поэтому я связываю их следующим образом: 

<tr>
    <th>Thing </th>
    <th>related to Thing </th>
</tr>
<tr>
    <td><a name = "t1"/>Thing 1</td>
    <td><a href = "#t2">Thing2 is related </a></td>
</tr>
<tr>
    <td><a name = "t2"/>Thing2</td>
    <td><a href = "#t1">Thing1 is related </a></td>
</tr>

Теперь я хочу, чтобы при нажатии «Thing2 related» я прыгалвниз по странице (что работает), но затем я бы хотел, чтобы этот ряд вскоре загорелся, чтобы указать, какая строка имеется в виду.Есть что-то для этого?

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Вам нужна функция onclick, чтобы при нажатии на гиперссылку Related знал, что нужно выделить.

function highlight(selector) {
  var highlighted = document.querySelector("a[name=" + selector + "]");
  var originalColor = highlighted.style.backgroundColor;
  highlighted.style.backgroundColor = "yellow";
  setTimeout(function() {
    highlighted.style.backgroundColor = originalColor;
  }, 1000);
}

function setHighlightCall(selector) {
  return function() {
    highlight(selector);
  };
}

window.onload = function() {
  var anchors = document.querySelectorAll("a[href^='#']");
  anchors.forEach(function(anchor) {
    var anchorName = anchor.href.match(/#([^#]+)$/)[1];
    anchor.onclick = setHighlightCall(anchorName);
  });
};
<tr>
  <td><a name="t1"/>Thing 1</td>
  <td><a href="#t2">Thing2 is related </a></td>
</tr>
<div style="height:500px"></div>
<tr>
  <td><a name="t2"/>Thing2</td>
  <td><a href="#t1">Thing1 is related </a></td>
</tr>
0 голосов
/ 11 октября 2018

Если немного jQuery приемлемо, тогда да.Вам нужно будет сделать одно небольшое изменение в html, изменив атрибут name на id. 

// Listen for clicks on '.link' elements
$('table').on('click', '.link', function() {
  // Find previously selected items and remove the class, restricting the search to the table.
  $('.related', 'table').removeClass('related')
  // Find the click target
  target = $(this).attr('href');
  // Find its 'tr' and highlight it
  $(target).closest('tr').addClass('related')
});
.related {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Thing </th>
    <th>related to Thing </th>
  </tr>
  <tr>
    <td><a id="t1" />Thing 1</td>
    <td><a class="link" href="#t2">Thing2 is related </a></td>
  </tr>
  <tr>
    <td><a id="t2" />Thing2</td>
    <td><a class="link" href="#t1">Thing1 is related </a></td>
  </tr>
</table>
...