Question

9

Select single table row from bootstrap table

rated 0 times [ 15] [ 6] / answers: 1 / hits: 27747 / 7 Years ago, sun, september 24, 2017, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myrap

Add To Favorites

Follow

Total Points: 407

Total Questions: 105

Total Answers: 109

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 7 Years ago kieraelsies · Accepted Answer

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>