开发者问题收集

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

2019-05-08
153
javascript html css

我需要像这样用“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>
2个回答

我建议的解决方案是使用 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>
Jonathan Gagne
2019-05-08
<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>

使用 jquery 怎么样？

Wang Liang
2019-05-08