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

时间:2019-02-06 16:04:33

标签: html css html-table

我正在尝试创建一个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>    

输出:

Original table alignment

包裹在表体中的表格可以对连续的单元格进行分组:

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

输出:

Disturbed table alignment

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

Expected table highlighting

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

您不必编辑表的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>