Multiple selection row

You can use the ctrl+click to select one row or use shift+click to select a range of rows

by wenyi

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/Bighamster/bootstrap-table/multiple-selection-row-v2/src/extensions/multiple-selection-row-v2/bootstrap-table-multiple-selection-row-v2.js"></script>
<h1>Plugin to enable the multiple selection row.</h1>
<p>You can use the ctrl+click to select one row or use shift+click to select a range of rows.</p>
<table data-toggle="table" data-click-to-select='true' data-multiple-select-row='true' data-pagination="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox='true'></th>
      <th>Item ID</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td></td>
      <td>1</td>
      <td>Name 1</td>
      <td>$123</td>
    </tr>
    <tr id="2">
      <td></td>
      <td>2</td>
      <td>Name 2</td>
      <td>$456</td>
    </tr>
    <tr id="3">
      <td></td>
      <td>3</td>
      <td>Name 3</td>
      <td>$789</td>
    </tr>
    <tr id="4">
      <td></td>
      <td>4</td>
      <td>Name 4</td>
      <td>$012</td>
    </tr>
    <tr id="5">
      <td></td>
      <td>5</td>
      <td>Name 5</td>
      <td>$345</td>
    </tr>
    <tr id="6">
      <td></td>
      <td>6</td>
      <td>Name 6</td>
      <td>$678</td>
    </tr>
    <tr id="7">
      <td></td>
      <td>7</td>
      <td>Name 7</td>
      <td>$901</td>
    </tr>
   ...

CSS

.selected td {
  color: white !important;
  background-color: #08C !important;
}
/* line 15, /Users/bighamster/Google Drive/Projects/drtv/app/assets/stylesheets/common.scss */
.selected td a {
  color: white !important;
}