引导表多选行并突出显示答案

【问题标题】：Bootstrap table multi select rows and highlight引导表多选行并突出显示
【发布时间】：2020-05-17 05:40:47
【问题描述】：

我正在使用 Bootstrap Tables，目前正在使用他们提供的 Hoverable Rows。我使用了https://getbootstrap.com/docs/4.4/content/tables/#hoverable-rows 中的表格代码，并对其稍作修改以与 JS 一起使用。

<table class="table table-hover" id="myTable">
  <thead>
    <tr class="clickable-row">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr class="clickable-row">
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

基本上我希望能够点击一行并保持悬停效果。然后当我再次单击它时，它将删除悬停。但我希望能够选择多行。

我找到了一些 JS，并且能够让它在只选择一行的情况下工作..

$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active').siblings().removeClass('active');
});

我不太了解 JS，正在寻找一种方法来允许选择/取消选择多行。

我能够将 JS 更改为：

$('#myTable').on('click', '.clickable-row', function(event) {
  $(this).addClass('active');
});

它允许我选择多个。但我无法取消选择它们。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

根据类的存在或状态参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

.toogleClass(className)

 $('#myTable').on('click', '.clickable-row', function(event) {
    $(this).toggleClass('active');
 });

【讨论】：

【解决方案2】：

$(".clickable-row").click(function () {
  if ($(this).hasClass("hover")) {
    $(this).removeClass("hover");
  } else {
    $(this).addClass("hover");
  }
});

//为悬停类创建css代码

.hover {
  background-color: #8f8f8f;
}

我相信这个解决方案可以解决您的问题 hasClass() 检查是否存在悬停类，如果存在，您将删除它，否则您将向元素添加活动类，您可以更改任何您想要的悬停颜色

【讨论】：

太棒了。完全符合我的需要。