Как выбрать все элементы определенного имени класса?

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

Вместо использования класса используйте id. Как это:

<tr id="clientRow1"> 
 
    <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 id="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>

Answer 3

В строке нажмите, удалить 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 4

Вот решение используя 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 5

Вам может понадобиться сделать что-то вроде этого:

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