从引导表中选择单个表行

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> 

Answer 2

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

Answer 3

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