Выберите строку таблицы Bootstrap по идентификатору

Question

Мне нужно выбрать (выделить) конкретную строку таблицы (это таблица Bootstrap 4).
Вот пример кода:

    <p><a href="javascript:void(0);" onclick="select(3);">Select Row</a></p>
    <table id="mtable" class="table table-hover b-t">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr id="tr1">
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr id="tr2">
          <td>2</td>
          <td>Otto</td>
          <td>@TwBootstrap</td>
          <td>123</td>
        </tr>
        <tr id="tr3">
          <td>3</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr id="tr4">
          <td>4</td>
          <td>Larry the Bird</td>
          <td>@twitter</td>
          <td>abc</td>
        </tr>
      </tbody>
    </table>

<script type="text/javascript">
  $('#mtable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
  });            
  function       select(rowID){
    // here I need to find tr3 and select it.
  }
</script>

вверху у меня есть ссылка (выбрать), и при нажатии мне нужно, чтобы была выделена только строка 3 (выделено). Другими словами, если выбрана какая-то другая строка, она не должна быть выбрана, и должна быть выбрана только строка 3.
Как это сделать, пожалуйста?
Спасибо

Answer 1

Поскольку вы используете jQuery, я удалил атрибут onclick. Затем я добавил атрибут data с именем id, в который вы поместите идентификатор, на который будет нацелен идентификатор <a>.

$(function() {
  $('a').on('click', function() {
    var id = $(this).data('id');
    $('tr').removeClass('highlight');
    $('#row' + id).addClass('highlight');
  })
})

.highlight {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a data-id="1">Select Row 1</a></p>
<p><a data-id="2">Select Row 2</a></p>
<p><a data-id="3">Select Row 3</a></p>
<p><a data-id="4">Select Row 4</a></p>
<table id="mtable" class="table table-hover b-t">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row1">
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr id="row2">
      <td>2</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
      <td>123</td>
    </tr>
    <tr id="row3">
      <td>3</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr id="row4">
      <td>4</td>
      <td>Larry the Bird</td>
      <td>@twitter</td>
      <td>abc</td>
    </tr>
  </tbody>
</table>