从引导表中选择单个表行

时间：2017-09-24 16:46:55

标签： javascript jquery bootstrap-4

我需要能够通过单击选择表中的行（并使用css类进行高亮样式）

＆＃13;
＆＃13; 
$("#infoTable tr").click(function() {
  var selected = $(this).hasClass("highlight");
  $("#infoTable tr").removeClass("highlight");
  if (!selected)
    $(this).addClass("highlight");
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我的档案：

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

但它什么也没做。感谢您的任何帮助，谢谢！

3 个答案:

答案 0 :(得分：2)

您可以这样做：

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

答案 1 :(得分：1)

＆＃13;
＆＃13; 
$("#infoTable tr").click(function() {

      $(".clickableRow").on("click",function(){
       $(".highlight").removeClass("highlight");
      $(this).addClass("highlight");
      
      });
});
＆＃13; 
.highlight{
background-color:yellow;

}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

$( document ).ready(function() {
  $("#infoTable tbody tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#infoTable tr").removeClass("highlight");
    if (!selected)
      $(this).addClass("highlight");
  });
});
#infoTable .highlight td{
  background-color: gold;
}
<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>

相关问题
最新问题