从引导表中选择单个表行

Question

我需要能够通过单击来选择表格中的一行（并使用 css 类进行突出显示样式）

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

我的文件：

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

但它什么也不做。任何帮助表示赞赏，谢谢！

Answer 1

你可以这样做：

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