表格栏在悬停时更改颜色

时间：2018-08-08 20:53:27

标签： javascript jquery html

我一直使用网上找到的一系列模板将表格格式拼凑在一起（我自己不是熟练的程序员）。我正在尝试创建一个表格，当您将鼠标悬停在特定的表格单元格上时，该表格将同时突出显示整个行和列，同时它还包含固定顶部行的滚动功能。我已经弄清楚了如何突出显示行，但在处理列时遇到了困难。

我创建了一个JSFiddle，它将显示问题：https://jsfiddle.net/n2p0zj6m/4/

我正在使用下面的代码，将鼠标悬停在表格单元格上时，将相关类添加到表格中。我非常确定错误在于此代码中的某个地方，但我不知道为什么这不起作用。

  (function ($) {
    "use strict";
    $('.column100').on('mouseover',function(){
        var table1 = $(this).parent().parent().parent();
        var table2 = $(this).parent().parent();
        var verTable = $(table1).data('vertable')+"";
        var column = $(this).data('column') + "";

        $(table2).find("."+column).addClass('hov-column-'+ verTable);
        $(table1).find(".row100.head ."+column).addClass('hov-column-head-'+ verTable);
    });

    $('.column100').on('mouseout',function(){
        var table1 = $(this).parent().parent().parent();
        var table2 = $(this).parent().parent();
        var verTable = $(table1).data('vertable')+"";
        var column = $(this).data('column') + "";

        $(table2).find("."+column).removeClass('hov-column-'+ verTable);
        $(table1).find(".row100.head ."+column).removeClass('hov-column-head-'+ verTable);
    });
  })(jQuery);

我还将在下面提供一段HTML结构：

  <div class="tbl-header">
    <table data-vertable="ver1" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr class="row100 head">
          <th class="column100 column1" data-column="column1">Code</th>
          <th class="column100 column2" data-column="column2">Company</th>
          <th class="column100 column3" data-column="column3">Price</th>
          <th class="column100 column4" data-column="column4">Change</th>
          <th class="column100 column5" data-column="column5">Change %</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table data-vertable="ver1" cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr class="row100">
          <td class="column100 column1" data-column="column1">AAC</td>
          <td class="column100 column2" data-column="column2">AUSTRALIAN COMPANY </td>
          <td class="column100 column3" data-column="column3">$1.38</td>
          <td class="column100 column4" data-column="column4">+2.01</td>
          <td class="column100 column5" data-column="column5">-0.36%</td>
        </tr>

2 个答案:

答案 0 :(得分：1)

一件事，不需要将表的各个级别划分为不同的divs-这会产生问题，并使任何机械手/可访问性技术感到困惑。在下面的代码段中，我将其合并到一个表中。改用thead和tbody。

此外，使用我使用的方法（收集单元格的index-从而收集其列），无需额外的data-x或classes进行跟踪。而且，如果您的目标是用于样式设计，则应研究:nth-child()来创建交替的行等。

$('tbody td').on('mouseover', function() { // Triggers when a table cell is hovered under a tbody
  column = $(this).index(); // Find which column the cell belongs to (its index amongst its siblings)

  $(this).parent().siblings().each(function() { // loop over all rows except current (the siblings)
    $(this).children().eq(column).addClass('colHover'); // addClass to the cell in the same column
  });
});

$('tbody td').on('mouseout', function() { // Triggers when leaving a table cell
  $(this).parent().siblings().each(function() {
    $(this).children().removeClass('colHover'); // removeClass from all children, of all siblings
  });
});
table thead tr {
  background-color: #AAA;
}

table td,
table th {
  padding: .5em .75em;
}

table tr td:nth-child(n+2) {
  text-align: center;
}

table tbody tr:hover,
table tbody tr td.colHover {
  background-color: #FFDDFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tblFinance">
  <table data-vertable="ver1" cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row100">
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr class="row101">
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr class="row102">
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr class="row103">
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
    </tbody>
  </table>
</div>

编辑：我建立了一个附加功能，该功能将事件附加到滚动。用户滚动到（或超过）表格顶部后，<tr>内的<thead>变为“粘滞”-它应用position: fixed，并调整表格以处理丢失的内容行而不会跳动周围的页面。

注意：按照目前的形式，它伸缩性不是很好。在特定表中，它将仅真正支持单个“粘性”元素。

$(document).ready(() => {
  var tblObject = $('table#tblFinance');
  var tblTop = tblObject.offset().top; // Find Table's offset from the top of the page
  var tblSticky = false; // reduce redundant conditional spam

  $(window).scroll(() => {
    if (!tblSticky && $(document).scrollTop() >= tblTop) {
      // If Sticky is OFF, and user scrolls to/below the table's top

      tblObject.find('thead tr').css('position', 'fixed'); // Set Position: fixed
      tblObject.css('padding-top', tblObject.find('thead tr').outerHeight() + 'px'); // Add padding to table, to account for <tr> being removed from the flow
      tblSticky = true; // Enable Sticky

    } else if (tblSticky && $(document).scrollTop() <= tblTop) {
      // If Sticky is ON, and user scrolls to/above the table's top

      tblObject.find('thead tr').css('position', 'static'); // Set Position: Static
      tblObject.css('padding-top', '0'); // Remove padding; <tr> is back in the flow
      tblSticky = false; //Disable Sticky

    }
  });
});

$('tbody td').on('mouseover', function() { // Triggers when a table cell is hovered under a tbody
  column = $(this).index(); // Find which column the cell belongs to (its index amongst its siblings)

  $(this).parent().siblings().each(function() { // loop over all rows except current (the siblings)
    $(this).children().eq(column).addClass('colHover'); // addClass to the cell in the same column
  });
});

$('tbody td').on('mouseout', function() { // Triggers when leaving a table cell
  $(this).parent().siblings().each(function() {
    $(this).children().removeClass('colHover'); // removeClass from all children, of all siblings
  });
});
table {
  text-align: center;
}

table thead tr {
  top: 0;
  background-color: #AAA;
}

table td,
table th {
  padding: .5em .75em;
}

table td:first-child,
table th:first-child {
  width: 80px;
}

table td:nth-child(2),
table th:nth-child(2) {
  width: 300px;
}

table td:nth-child(n+3),
table th:nth-child(n+3) {
  width: 100px;
}

table tbody tr:hover,
table tbody tr td.colHover {
  background-color: #FFDDFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Title</h1>
  <p>Some content, to push the table down a bit.</p>

  <table id="tblFinance" data-vertable="ver1" cellpadding="0" cellspacing="0" border="0">
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AAA</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>BBB</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>CCC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>DDD</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
      <tr>
        <td>AAC</td>
        <td>AUSTRALIAN COMPANY </td>
        <td>$1.38</td>
        <td>+2.01</td>
        <td>-0.36%</td>
      </tr>
    </tbody>
  </table>
</div>

答案 1 :(得分：1)

如果我正确理解，我认为您的问题出在CSS中。您的列正在使用正确的类hov-column-ver1，但是在CSS中，您只为tbl-header下的元素赋予绿色背景：

.tbl-header .hov-column-ver1 {
  background-color: green;
}

您需要为tbl-content下的元素添加样式。将此添加到您的CSS块中：

.tbl-content .hov-column-ver1 {
  background-color: green;
}

这是你的意思吗？

P.S。请考虑查看jQuery中的closest()元素。除了使用.parent().parent().parent()，还可以使用.closest("table")。恕我直言，这真的很有用，以防HTML结构发生变化，因为它不会影响您的JS代码。读起来也很友好：）

相关问题
最新问题