如何在鼠标悬停时以特定方式突出显示表格单元格

Question

如何在鼠标悬停时以特定方式突出显示表格单元格

3

我需要突出显示带有“J”标记的表格单元格，就像这样：

在这张图片中，我悬停在一个单元格上（那个有黑色边框的单元格），周围某些单元格会改变颜色。如何做到这一点？我只能更改单个单元格、行或列。

td {
    padding: 8px;
    background-color: #fff;
    font-weight: bold;
}
tr:hover {
    color: #fff;
    background-color: #000;
}

tr:hover td {
    background-color: transparent;
}

<table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>

- AndSolomin34

2

那么边缘情况呢，比如悬停在左上角、右上角、左下角和右下角的单元格上呢？ - David Thomas

2个回答

2

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      border: 1px solid #000;
    }
    
    table td {
      border: 1px solid #000;
    }
    
    td {
      text-align: center;
      font-size: 0;
      width: 30px;
      height: 30px;
      background-color: #fff;
      font-weight: bold;
    }
    
    tr.hover {
      color: #fff;
      background-color: #000;
    }
    /* tr:hover td {
            background-color: transparent;
        } */
    
    td.hover {
      color: #fff;
      background-color: #000;
    }
    
    td.center {
      color: #fff;
      background-color: #fff;
      outline: 2px red solid;
    }
  </style>
  <script>
    $(document).ready(function() {
      var HEIGHT = 5;
      var WIDTH = 5;
      $('td').hover(function() {
        var self = $(this);
        var table = self.parent().parent();

        var column = self.index();
        var row = self.parent().index();

        var current = table.find(`tr:eq(${row}) td:eq(${column})`)
        current.toggleClass('center')
        if (column > 0) {
          var before = table.find(`tr:eq(${row}) td:eq(${column - 1})`)
          before.toggleClass('hover');
        }

        if (row < HEIGHT - 1) {
          var bottom = table.find(`tr:eq(${row + 1}) td:eq(${column})`)
          bottom.toggleClass('hover');
        }
        if (column < WIDTH - 1) {
          var next = table.find(`tr:eq(${row}) td:eq(${column + 1})`)
          next.toggleClass('hover');
        }
        if (row > 0 && column < WIDTH - 1) {
          var nextUp = table.find(`tr:eq(${row - 1}) td:eq(${column + 1})`)
          nextUp.toggleClass('hover');
        }
      });
    });
  </script>
</head>

<body>
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>

      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>
</body>

</html>

How about using jquery?

- Wang Liang

仍然无法正常工作，该类在某些时候仍会保持附加状态。 - Jonathan Gagne

好的，现在它可以工作了，但为什么要使用两次几乎相同的函数呢？为什么不只使用toggleClass呢？这似乎是重复的，当你看到相同的代码两次时，需要重构它，说明有问题。toggleClass将处理您的回调函数。 - Jonathan Gagne

啊，我感觉我比 OP 更帮了你，而且你似乎相当聪明，是个好学者，这让我感到非常高兴！我的工作在这里完成了；）如果你改变它，我会点赞你的出色工作。 - Jonathan Gagne

1

好的，没问题，我已经进行了更改以取消我的反对票。看看我做了什么，通过使用toggleClass，它将减少一半的代码量。 - Jonathan Gagne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Gagne · Accepted Answer

我提出的解决方案是使用jQuery来将事件与每个 td:hover 链接起来。通过使用 each、hover、Math.floor 和 toggleClass，您可以轻松实现想要做的事情。

$(function() {
  $('#my-table td').each(function(index, elem){
    $("#" + elem.id).hover(function(){
      row_index = Math.floor((elem.id - 1) / 5);
      col_index = (elem.id - 1) % 5;
      
      right_cell_col = col_index + 1;
      top_cell_index = parseInt(elem.id) - 4;
      left_cell_col = col_index - 1;
      bottom_cell_index = parseInt(elem.id) + 5;
      
      if(left_cell_col >= 0) $("#" + (elem.id - 1)).toggleClass("colored");
      if(right_cell_col <= 4) {
        if (top_cell_index > 0) $("#" + top_cell_index).toggleClass("colored");
        $("#" + (parseInt(elem.id) + 1)).toggleClass("colored");
      }
      if(bottom_cell_index < 26) $("#" + bottom_cell_index).toggleClass("colored");
    });
  });
});

td {
    width: 10px;
    height: 10px;
    border: 1px solid #ddd;
    padding: 8px;
    background-color: #fff;
    font-weight: bold;
}
td:hover {
    border-color: black;
    font-weight: bold;
}
.colored {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my-table">
    <tr>
        <td id=1></td>
        <td id=2></td>
        <td id=3></td>
        <td id=4></td>
        <td id=5></td>
    </tr>
    <tr>
        <td id=6></td>
        <td id=7></td>
        <td id=8></td>
        <td id=9></td>
        <td id=10></td>
    </tr>
    <tr>
        <td id=11></td>
        <td id=12></td>
        <td id=13></td>
        <td id=14></td>
        <td id=15></td>
    </tr>
    <tr>
        <td id=16></td>
        <td id=17></td>
        <td id=18></td>
        <td id=19></td>
        <td id=20></td>
    </tr>
    <tr>
        <td id=21></td>
        <td id=22></td>
        <td id=23></td>
        <td id=24></td>
        <td id=25></td>
    </tr>
</table>