CODEWITHSUNDEEP
javascriptjquerybootstrap-4
Michael
Michael

Reputation: 189

Select single table row from bootstrap table

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!

Upvotes: 8

Views: 35190

Answers (3)

kyun
kyun

Reputation: 10274

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

Upvotes: 0

Mehdi Bouzidi
Mehdi Bouzidi

Reputation: 1995

$("#infoTable tr").click(function() {

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

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

Upvotes: 1

palaѕн
palaѕн

Reputation: 73926

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>

Upvotes: 14

Related Questions