title: How to highlight and select multiple rows?
body: <p>I would like to be able to perform similar operation to Excel where users can highlight and select multiple rows:</p>
  <p>[<img src="https://i.stack.imgur.com/XYlqq.png" alt="Selected Excel rows are highlighted and the entire highlighted area has a green border." />]</p>
  <p>Here is an example where a user can click on the row and the row gets selected. But I want the green outline similar to Excel to be applied to my Bootstrap table. Ideally, there would be an option where to change the cursor to be able to highlight and select rows.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#table tr").click(function(){
     $(this).toggleClass('selected');    
     var value=$(this).find('td:first').html();
     alert(value);    
  });
  
  $('.ok').on('click', function(e){
      var selected = [];
      $("#table tr.selected").each(function(){
          selected.push($('td:first', this).html());
      });
      alert(selected);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
  
  .selected {
      background-color: brown;
      color: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"&gt;
  
  
  &lt;table id="table"&gt;
      &lt;tr&gt;
          &lt;td&gt;1 Ferrari F138&lt;/td&gt;
          &lt;td&gt;1 000€&lt;/td&gt;
          &lt;td&gt;1 200€&lt;/td&gt;
          &lt;td&gt;Model monopostu stajne Scuderia Ferrari pre sezónu 2013&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;F138&lt;/td&gt;
          &lt;td&gt;Klik pre detaily&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;2 Ferrari F138&lt;/td&gt;
          &lt;td&gt;1 000€&lt;/td&gt;
          &lt;td&gt;1 200€&lt;/td&gt;
          &lt;td&gt;Model monopostu stajne Scuderia Ferrari pre sezónu 2013&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;F138&lt;/td&gt;
          &lt;td&gt;Klik pre detaily&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;3 Ferrari F138&lt;/td&gt;
          &lt;td&gt;1 000€&lt;/td&gt;
          &lt;td&gt;1 200€&lt;/td&gt;
          &lt;td&gt;Model monopostu stajne Scuderia Ferrari pre sezónu 2013&lt;/td&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;F138&lt;/td&gt;
          &lt;td&gt;Klik pre detaily&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type="button" name="OK" class="ok" value="OK"/&gt;</code></pre>
  </div>
  </div>
  </p>