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

Question

I am trying to create an HTML table that allows highlighting/hovering/clicking on a group of consecutive row cells as one. Is there a way to group them with a wrapper element so that they react to a single hover/click event?

I tried to wrap them in tbody/colgroup tags but that disturbs the layout of the table. Whatever wrappers I tried like div or span they disrupt the table alignment.

This is the original HTML table

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

Output:

The table wrapped in tbody to group the consecutive cells:

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

Output:

I expect the table to highlighted as below:

Appreciate your help!

Answer 1

You don't have to edit the sintax of a table since it should always be like (table > tbody > tr > td). In your particular case, you may use a jQuery function that let you make that particular highlight like this:

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