在表格中使用Bootstrap按钮插件突出显示多个选项

Question

我正在使用带有引导按钮插件的引导表，以使列可单击。除了我希望tbody中的第一列与其他4列分开之外，这似乎工作正常且符合预期。

thead部分似乎可以正常工作，我可以单击标题，然后将其突出显示。

问题来自tbody部分。我可以单击第一列，它会突出显示，但是如果我单击4个td列中的任何一列，则会从第一列中删除选择并突出显示我选择的新列。

我假设引导按钮插件不是基于输入名称，而是基于它包含的所有输入？

我建立了一个jsfiddle来帮助显示我要描述的内容。正如您将在jsfiddle中看到的那样，我在thead中选择了选项4 ，也有选项3 和选项3-4 tbody中选择了strong>，但是引导按钮插件仅突出显示了选项3 。而且，如果您点击tbody中的任何选项，它将仅突出显示该选项

Answer 1

我将发布我想出的答案...我真的很讨厌使用setTimeout，但是嘿，为什么不行。

这将在用户单击选项之一时提供一个小的延迟，然后将活动类添加到当前选中的所有选项中。

$('#frmOptions .btn').on('click', function(event) {
    var $inputs = $('#frmOptions input[type="radio"]');
    setTimeout(function() {
        $inputs.each(function(index, input) {
            $(input).closest('.btn').toggleClass('active', $(input).is(':checked'));
        });
    }, 0.01);
});

您可以在此jsfiddle

中看到此功能

Answer 2

Bootstrap一次仅激活具有data-toggle="button"的元素的一个孩子。因此，表<tbody>中只有一个元素可以一次处于活动状态。

Bootstrap source的关键部分：

const rootElement = SelectorEngine.closest(
  this._element,
  Selector.DATA_TOGGLE
)

// ...

const activeElement = SelectorEngine.findOne(Selector.ACTIVE, rootElement)

if (activeElement) {
  activeElement.classList.remove(ClassName.ACTIVE)
}

另一种方法是创建一个新表来表示第一个“列”。

<div class="row no-gutters">
<div class="col-3">
  <table class="table table-striped" data-toggle="button">
    <thead>
      <tr>
        <!-- empty placeholder -->
      </tr>
      <tr>
        <!-- first row header -->
      </tr>
      <!-- etc. -->
    </thead>
  <table>
</div>
<div class="col-9">
  <!-- the table you set up, minus the first column -->
</div>
</div>

.no-gutters类可帮助两个表看起来像一个表。

此处完整的解决方案：https://jsfiddle.net/urbt6wcn/1/