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

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>

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

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类，然后将此类添加到单击的行中：

＆＃13;

＆＃13;

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

＆＃13;

table td { 
  padding:5px 50px;
  border:1px solid #d8d8d8;
}

table tr.selected td { background-color: #f1f1f1; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

});

＆＃13;

.active {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;