Строка JQuery для независимой таблицы класса

Question

Я получил две таблицы, и я нажимал на любую строку и переключал класс. В то же время я бы переключил одну и ту же строку второй таблицы с тем же содержимым.

$("table tr").on("click", function() {
  $(this).toggleClass("blue");
});

.blue {
  background-color: rgb(3, 135, 255);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
</table>

Спасибо за помощь.

Answer 1

Получите содержимое текущей строки, затем используйте его, чтобы найти совпадающие строки во всех таблицах и переключить их.

$("table tr").on("click", function() {
  var content = $(this).text().trim();
  $("table").find("tr").filter(function() {
    return $(this).text().trim() == content;
  }).toggleClass("blue");
});

.blue {
  background-color: rgb(3, 135, 255);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
</table>

Answer 2

Вы можете использовать .index () текущей строки:

$("table tr").on("click", function(){
    var index = $(this).closest('tr').index();
    $("table").each(function(){
      $(this).find('tr').eq(index).toggleClass("blue");
    });
});

.blue{
  background-color: rgb(3,135,255);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td>David Parsons</td>
  </tr>
  <tr>
    <td>Ryan Astruld</td>
  </tr>
  <tr>
    <td>In The End (cover)</td>
  </tr>
  <tr>
    <td>John Lisbon</td>
  </tr>
</table>