高光一次仅切换一行，切换CSS类

Question

if I have rows in a table like this http://output.jsbin.com/icusec/2 where I'm highlighting selected row on a click, how can I improve this to have selected only one, for example if I first select third row it will get highlighted but when I click on second row then second row should become highlighted and third should not.

$(document).ready(function(){
    $("#rowClick").children("tbody").children("tr").children("td").click(function(){
        $(this.parentNode).toggleClass("active");
    });
});

table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;}
table tr.active td {background: #ccc;}

<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
  </table>

Answer 1

Your JavaScript would like something like:

 $(document).ready(function() { $("#rowClick").on('click', 'tr', function() { $(this) .addClass('active') .siblings() .removeClass('active'); }); }); 

 table, table tr, table tr td { margin: 0; padding: 0; border: 0; cursor: pointer; } table tr.active td { background: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="rowClick"> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table> 

Answer 2

You can do it like that:

 $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $("tr").removeClass("active"); $(this.parentNode).addClass("active"); }); }); 

 table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;} table tr.active td {background: #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="rowClick"> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table> 

Answer 3

 $(document).ready(function() { $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $('#rowClick tbody tr').removeClass('active') $(this.parentNode).toggleClass("active"); }); }); 

 .active{color:red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="rowClick"> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table> 

1. Remove class on all tr then add the class on clicked parent(add selector to be specific to avoid affecting other tr)

Answer 4

Check this,

$(document).ready(function(){
    $("td").click(function(){
        $(this).closest("#rowClick").find("tr").removeClass("active");
        $(this.parentNode).addClass("active");
    });
});

I hope this will work.

Answer 5

Here is a solution where class can be removed after second click on the same row.

 $(document).ready(function(){ $("#rowClick tbody tr").click(function(){ if ($(this).hasClass("active")) { $(this).removeClass("active"); } else { $("#rowClick tbody tr").removeClass("active"); $(this).addClass("active"); } }); }); 

 table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;} table tr.active td {background: #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="rowClick"> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table>