How do I select all elements of a specific class name?

Question

I have a table within which I want a user to be able to click on any table row, and when they do, it will change the background color of that table row to show that it is highlighted, that's the one that has been selected. I also want them to be able to be able to then select a different table row within that same table, which then should remove the background color from the previous row, and change the newly selected table row to the highlight background color.

So I have

<tr class="clientRow">
    <td>
        @Html.DisplayFor(x => x.ReferralTypeDescription)
    </td>
    <td>
        @Html.DisplayFor(x => x.ReferralDate)
    </td>
    <td>
        @Html.DisplayFor(x => x.ReferralStatus)
    </td>
    <td>
        @Html.DisplayFor(x => x.ContactNo)
    </td>
</tr>

<tr class="clientRow">
    <td>
        @Html.DisplayFor(x => x.ReferralTypeDescription)
    </td>
    <td>
        @Html.DisplayFor(x => x.ReferralDate)
    </td>
    <td>
        @Html.DisplayFor(x => x.ReferralStatus)
    </td>
    <td>
        @Html.DisplayFor(x => x.ContactNo)
    </td>
</tr>

I would imagine I would have a CSS class like isSelected or something similar, which would be added to the clicked row, and removed from the previous row that has that class. I'm just not sure how to do it. Anyone able to help?

Answer 1

You idea is correct. You can implement it like following.

 $('.clientRow').click(function(){ $('.clientRow.isSelected').removeClass('isSelected'); $(this).addClass('isSelected'); }); 

 .isSelected { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="clientRow"> <td> Referral Type Description </td> <td> Referral Date </td> </tr> <tr class="clientRow"> <td> Referral Type Description </td> <td> Referral Date </td> </tr> </table> 

Answer 2

On row click, remove selected class from all rows, then add this class to the clicked row:

 $(document).on('click', 'tr', function() { var that = $(this); that.closest('table').find('tr').removeClass('selected'); that.addClass('selected'); }); 

 table td { padding:5px 50px; border:1px solid #d8d8d8; } table tr.selected td { background-color: #f1f1f1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table> <tbody> <tr><td>Test</td><td>Test</td></tr> <tr><td>Test</td><td>Test</td></tr> <tr><td>Test</td><td>Test</td></tr> <tr><td>Test</td><td>Test</td></tr> <tr><td>Test</td><td>Test</td></tr> <tr><td>Test</td><td>Test</td></tr> </tbody> </table> 

Answer 3

Here is a solution using jQuery.

 $(function() { $('.table1 tr').click(function() { $this = $(this); $('.table1 tr').removeClass("selected"); $this.addClass("selected"); }); }); 

 table { border-collapse: collapse } td { cursor: pointer; padding: 5px 15px; border: 1px solid grey; } tr.selected td { background-color: cornflowerblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table1"> <tr> <td>1</td> <td>Title 1</td> </tr> <tr> <td>2</td> <td>Title 2</td> </tr> <tr> <td>3</td> <td>Title 3</td> </tr> <tr> <td>4</td> <td>Title 4</td> </tr> </table> 

Answer 4

You might need to do something like this:

 $(function() { // function that adds/removes a css class var changeBg = function() { // remove active class from all elements $('tr, td').removeClass('active'); // add active class to element clicked only $(this).addClass('active'); }; // bind clicking event to function $('tr, td').on('click', changeBg); }); 

 .active { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="clientRow"> <td> @Html.DisplayFor(x => x.ReferralTypeDescription) </td> <td> @Html.DisplayFor(x => x.ReferralDate) </td> <td> @Html.DisplayFor(x => x.ReferralStatus) </td> <td> @Html.DisplayFor(x => x.ContactNo) </td> </tr> <tr class="clientRow"> <td> @Html.DisplayFor(x => x.ReferralTypeDescription) </td> <td> @Html.DisplayFor(x => x.ReferralDate) </td> <td> @Html.DisplayFor(x => x.ReferralStatus) </td> <td> @Html.DisplayFor(x => x.ContactNo) </td> </tr> </table>