javascript - 悬停时更改表格行和列的背景

Question

菜鸟使用angularJS 。我有一个bootstrap使用 ng-repeat 填充表。它是一个矩阵布局，带有行和列标题，我应该如何突出显示完整的td row and column将光标放在相应的表格单元格上。

到目前为止，我在 main.css 上了一个类.tdHover{ background-color: red; }我想在悬停时应用它。

这是我的html在jade :

 td(ng-repeat='game in games', ng-mouseover="mouseOverTd(game)", ng-class="{??}", style='text-align:center;vertical-align:middle;')

Controller :

angular.module('theApp')
  .controller('MainCtrl', function ($scope, $http, socket) {
    $scope.games= [];
    $scope.idHoveredTD = null;

    $scope.mouseOverTd = function(game){
      window.alert(theme);
      //how should I apply/return class to apply?
    };
    //mouseout remove class?  

Answer 1

有两种方法可以解决这个问题。其中一种不涉及 JavaScript，但涉及一些稍微有点 hacky 的 CSS。另一种方法按照您的想法使用 ng-mouseover 。我更喜欢 CSS 方法，因为这意味着我的表格的外观完全由 CSS 控制，感觉更整洁。下面介绍了这两种方法。

纯 CSS 解决方案

当您使用纯 CSS 悬停时，您实际上可以影响表格的外观 - 您根本不需要使用 JavaScript。

为此，请添加一个类，在您的 td 中添加 class="tablecell"，并在您的行中添加一个类似的类。接下来，将这样的内容添加到您的 main.css 中:

.tablerow:hover, .tablecell:hover {
    background-color:red
}

这样就完成了三分之二的工作 - 行和单元格!

列更难，因为它们没有专门的元素来监视悬停。相反，我们可以使用一些 CSS hack - 制作一个巨大的突出显示元素，并剪掉它溢出到表格上方和下方的边缘。

table { 
    overflow: hidden;
}
.tablecell {
    position:relative;
}

.tablecell:hover::before {
    content:"";
    position: absolute;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
    /* keep it below table content */
    background-color: red;
}

实例:

把它们放在一起，我们得到这样的结果:

table {
      overflow: hidden;
    }
    .tablecell {
      position: relative;
    }
    .tablecell:hover::before {
      content: "";
      position: absolute;
      left: 0;
      top: -5000px;
      height: 10000px;
      width: 100%;
      z-index: -1;
      /* keep it below table content */
      background-color: red;
    }
    .tablerow:hover {
      background-color: red;
    }

<div ng-app="theApp" ng-controller="MyCtrl">
  <table>
    <tr class="tablerow">
      <td class="tablecell">aaa</td>
      <td class="tablecell">aaa</td>
      <td class="tablecell">aaa</td>
    </tr>
    <tr class="tablerow">
      <td class="tablecell">bbb</td>
      <td class="tablecell">bbb</td>
      <td class="tablecell">bbb</td>
    </tr>
    <tr class="tablerow">
      <td class="tablecell">ccc</td>
      <td class="tablecell">ccc</td>
      <td class="tablecell">ccc</td>
    </tr>
  </table>
</div>

More information on the column highlighting hack here.

---

JavaScript 解决方案

如果您想直接使用 JavaScript 来避免上述 CSS hack，您也可以这样做。然后，您的 mouseOverTd 函数需要记录当前鼠标悬停在哪一行和哪一列上。然后 ng-class 属性需要检查当前悬停的行和列是否与该单元格的行或列匹配。

类似这样的:

angular.module("theApp", [])
    .controller("MainCtrl", function ($scope) {
        $scope.rows = [1, 2, 3, 4]
        $scope.games = ['a', 'b', 'c', 'd'];
        $scope.hoveredCol = null;
        $scope.hoveredRow = null;
        $scope.mouseOverTd = function (row, game) {
            $scope.hoveredRow = row;
            $scope.hoveredCol = game;
        };
    });

还有你的 HTML(或者更确切地说 Jade):

td(ng-repeat="game in games", ng-mouseover="mouseOverTd(row, game)" ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}") {{game}}

当然，您需要确保在鼠标离开表格时重置 hoveredCol 和 hoveredRow，因此还要添加如下内容:

table(ng-mouseleave="hoveredCol = null; hoveredRow = null")

实例:

将这一切付诸实践，我们得到这样的结果:

angular.module("theApp", [])
  .controller("MainCtrl", function($scope) {
    $scope.rows = [1, 2, 3, 4]
    $scope.games = ['a', 'b', 'c', 'd'];
    $scope.hoveredCol = null;
    $scope.hoveredRow = null;
    $scope.mouseOverTd = function(row, game) {
      $scope.hoveredRow = row;
      $scope.hoveredCol = game;
    };
  });

td {
  padding: 10px;
}
.highlighted {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="MainCtrl">
  <table ng-mouseleave="hoveredCol = null; hoveredRow = null">
    <tr ng-repeat="row in rows">
      <td ng-repeat="game in games" ng-mouseover="mouseOverTd(row, game)" ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}">{{game}}</td>
    </tr>
  </table>
</div>