时间戳

首页 > 解决方案 > 按 ID 选择 Bootstrap 表行

twitter-bootstrap - 按 ID 选择 Bootstrap 表行

问题描述

我需要选择（突出显示）特定的表行（它是 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 行。
请问怎么做？
谢谢

标签： twitter-bootstrapbootstrap-4

解决方案

由于您使用的是 jQuery，因此我删除了该onclick属性。然后我添加了一个data名为 的属性id，这是您将<a>定位的 id 的位置。

$(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>

推荐阅读