如何突出显示/悬停/单击 HTML 表格中选定的一组连续行单元格

Question

我正在尝试创建一个 HTML 表格，该表格允许将一组连续的行单元格作为一个单元格突出显示/悬停/单击。有没有办法用包装元素对它们进行分组，以便它们对单个悬停/单击事件做出反应？

我试图将它们包装在 tbody/colgroup 标记中，但这会扰乱表格的布局。无论我尝试使用什么包装器，例如 div 或 span，它们都会破坏表格对齐方式。

这是原始的 HTML 表格

<table class="table">
  <tbody>
    <tr>
      <td class="td-body"><span class="td-value">41.01</span></td>
      <td class="td-body"><span class="td-value">43.357</span></td>
      <td class="td-body"><span class="td-value">115</span></td>
      <td class="td-body td-border-right"><span class="td-value">+2.56</span> 
      </td>
      <td class="td-body"><span class="td-value">12.10</span></td>
      <td class="td-body"><span class="td-value">23.80</span></td>
      <td class="td-body"><span class="td-value">3.49</span></td>
      <td class="td-body td-border-right"><span class="td-value">4.05</span></td>
    </tr>
    <tr>
      <td class="td-body"><span class="td-value">41.78</span></td>
      <td class="td-body"><span class="td-value">43.15</span></td>
      <td class="td-body"><span class="td-value">114</span></td>
      <td class="td-body td-border-right"><span class="td-value">+1.37</span> 
      </td>
      <td class="td-body"><span class="td-value">12.23</span></td>
      <td class="td-body"><span class="td-value">23.80</span></td>
      <td class="td-body"><span class="td-value">3.49</span></td>
      <td class="td-body td-border-right"><span class="td-value">4.15</span></td>
    </tr>
  </tbody>
</table>    

输出：

用 tbody 包裹的表格用于对连续的单元格进行分组：

<table class="table">
  <tbody>
    <tr>
        <tbody>
        <td class="td-body"><span class="td-value">41.01</span></td>
        <td class="td-body"><span class="td-value">43.357</span></td>
        <td class="td-body"><span class="td-value">115</span></td>
        <td class="td-body td-border-right"><span class="td-value">+2.56</span></td>
        </tbody>
        <tbody>
        <td class="td-body"><span class="td-value">12.10</span></td>
        <td class="td-body"><span class="td-value">23.80</span></td>
        <td class="td-body"><span class="td-value">3.49</span></td>
        <td class="td-body td-border-right"><span class="td-value">4.05</span></td>
        </tbody>
    </tr>
    <tr>
        <tbody>
        <td class="td-body"><span class="td-value">41.78</span></td>
        <td class="td-body"><span class="td-value">43.15</span></td>
        <td class="td-body"><span class="td-value">114</span></td>
        <td class="td-body td-border-right"><span class="td-value">+1.37</span></td>
        </tbody>
        <tbody>
        <td class="td-body"><span class="td-value">12.23</span></td>
        <td class="td-body"><span class="td-value">23.80</span></td>
        <td class="td-body"><span class="td-value">3.49</span></td>
        <td class="td-body td-border-right"><span class="td-value">4.15</span></td>
        </tbody>
    </tr>
  </tbody>
</table>

输出：

我希望表格突出显示如下：

感谢您的帮助！

Answer 1

您不必编辑表格的 sintax，因为它应该总是像 (table > tbody > tr > td)。在您的特定情况下，您可以使用一个 jQuery 函数，让您像这样制作特定的突出显示：

$('tbody tr td').hover(function (e) {
    $('table tbody tr td').removeClass('highlight');
    var startIndex = 4;
    var tr = $(this).parent('tr');
    if ($(this)[0].cellIndex >= startIndex) { //color this and next row                    
        tr.children(':gt(' + (startIndex - 1) + ')').addClass('highlight');
        tr.next().children(':lt(' + startIndex + ')').addClass('highlight');
    }
    else { //Color this and previous row
        tr.children(':lt(' + startIndex + ')').addClass('highlight');
        tr.prev().children(':gt(' + (startIndex - 1) + ')').addClass('highlight');
    }
});

.highlight
{
    background-color: #F5F6CE;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<table class="table table-sm table-condensed table-bordered">
    <tbody>
        <tr>
            <td class="td-body"><span class="td-value">41.01</span></td>
            <td class="td-body"><span class="td-value">43.357</span></td>
            <td class="td-body"><span class="td-value">115</span></td>
            <td class="td-body td-border-right"><span class="td-value">+2.56</span></td>
            <td class="td-body"><span class="td-value">12.10</span></td>
            <td class="td-body"><span class="td-value">23.80</span></td>
            <td class="td-body"><span class="td-value">3.49</span></td>
            <td class="td-body td-border-right"><span class="td-value">4.05</span></td>
        </tr>
        <tr>
            <td class="td-body"><span class="td-value">41.78</span></td>
            <td class="td-body"><span class="td-value">43.15</span></td>
            <td class="td-body"><span class="td-value">114</span></td>
            <td class="td-body td-border-right"><span class="td-value">+1.37</span></td>
            <td class="td-body"><span class="td-value">12.23</span></td>
            <td class="td-body"><span class="td-value">23.80</span></td>
            <td class="td-body"><span class="td-value">3.49</span></td>
            <td class="td-body td-border-right"><span class="td-value">4.15</span></td>
        </tr>
        <tr>
            <td class="td-body"><span class="td-value">41.78</span></td>
            <td class="td-body"><span class="td-value">43.15</span></td>
            <td class="td-body"><span class="td-value">114</span></td>
            <td class="td-body td-border-right"><span class="td-value">+1.37</span></td>
            <td class="td-body"><span class="td-value">12.23</span></td>
            <td class="td-body"><span class="td-value">23.80</span></td>
            <td class="td-body"><span class="td-value">3.49</span></td>
            <td class="td-body td-border-right"><span class="td-value">4.15</span></td>
        </tr>
    </tbody>
</table>