如何选择特定类名称的所有元素？

Question

我有一个表格，我希望用户能够在其中单击任何表格行，当他们单击时，它将更改该表格行的背景颜色以显示它已突出显示，即已被选中。 我还希望他们能够在同一张表中选择另一个表行，然后从前一行中删除背景色，并将新选择的表行更改为突出显示的背景色。

所以我有

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

我想我会有一个CSS类，如isSelected或类似的东西，它将被添加到所单击的行中，并从具有该类的上一行中删除。 我只是不确定如何去做。 有人能帮忙吗？

Answer 1

你的想法是正确的。 您可以像下面这样实现它。

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

单击行时，从所有行中删除selected类，然后将此类添加到单击的行中：

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

这是使用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

您可能需要执行以下操作：

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