如何通过引导设计将 SelectedRowStyle 应用于 gridview答案

【问题标题】：How to apply SelectedRowStyle for gridview with bootstrap design如何通过引导设计将 SelectedRowStyle 应用于 gridview
【发布时间】：2019-02-21 01:16:36
【问题描述】：

当我尝试为 gridview 应用 SelectedRowStyle 时，它没有应用。该应用程序正在使用引导模板。我应用的表格 css 也是 table table-striped 如何为所选行应用样式？

【问题讨论】：

标签： css asp.net twitter-bootstrap webforms bootstrap-4

【解决方案1】：

你可以参考下面的例子

为特定表使用自定义类。

$(".custom-table tbody tr").on('click', function() {
  $('.custom-table tbody tr').removeClass("selected");
  $(this).addClass("selected");
});

tr.selected {
  background-color: red;
}

/* This is not necessary if your not using table-striped. */
.table-striped tbody tr.selected:nth-of-type(odd) {
  background-color: red;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Bootstrap table example</title>
</head>

<body>

  <table class="custom-table table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

【解决方案2】：

你可以这样做，使用引导活动类。

$('.myTable').on('click', '.row', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

给活动类自定义 css，因为您使用的是条带表，以区分选定的行。

【讨论】：