Select single table row from bootstrap table

Question

I need to be able to select a row in a table by clicking it (and using css class for highlight styling)

$("#infoTable tr").click(function() {
  var selected = $(this).hasClass("highlight");
  $("#infoTable tr").removeClass("highlight");
  if (!selected)
    $(this).addClass("highlight");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table id="infoTable" class="table table-fixed">
    <thead>
      <tr>
        <th class="col-xs-3">Name</th>
        <th class="col-xs-3">Age</th>
        <th class="col-xs-6">Occupation</th>
        <th class="col-xs-6">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clickableRow">
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">43</td>
        <td class="col-xs-6">School Teacher</td>
        <td class="col-xs-6">$43,000</td>
      </tr>
      <tr class="clickableRow">
        <td class="col-xs-3">Tim</td>
        <td class="col-xs-3">52</td>
        <td class="col-xs-6">Plumber</td>
        <td class="col-xs-6">$55,000</td>
      </tr>
    </tbody>
  </table>
</div>

my files:

        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="main.js"></script>

but it does nothing. Any help is appreciated, Thank You!

Answer 1

You can do this like:

$('#infoTable').on('click', 'tbody tr', function(event) {
  $(this).addClass('highlight').siblings().removeClass('highlight');
});

.table tbody tr.highlight td {
  background-color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <table id="infoTable" class="table table-fixed table-condensed">
    <thead>
      <tr>
        <th class="col-xs-3">Name</th>
        <th class="col-xs-3">Age</th>
        <th class="col-xs-6">Occupation</th>
        <th class="col-xs-6">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clickableRow">
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">43</td>
        <td class="col-xs-6">School Teacher</td>
        <td class="col-xs-6">$43,000</td>
      </tr>
      <tr class="clickableRow">
        <td class="col-xs-3">Tim</td>
        <td class="col-xs-3">52</td>
        <td class="col-xs-6">Plumber</td>
        <td class="col-xs-6">$55,000</td>
      </tr>
      <tr class="clickableRow">
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">43</td>
        <td class="col-xs-6">School Teacher</td>
        <td class="col-xs-6">$43,000</td>
      </tr>
    </tbody>
  </table>
</div>