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

Question

Noobie at using angularJS . I have a bootstrap table populated using ng-repeat . It is a matrix layout, with row and column headers, how should I highlight the complete td row and column with cursor on respective table cell.

So far I have a class in main.css .tdHover{ background-color: red; } .tdHover{ background-color: red; } which I want to apply on hover.

Here is my html in 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

There are two ways to approach this. One involves no JavaScript, but some slightly hacky CSS. The other approach uses ng-mouseover as you were thinking. I prefer the CSS approach because it means my table's appearance is entirely controlled by CSS which feels tidier. Both approaches are presented below.

Pure CSS Solution

You can actually affect the way the table looks when you hover using pure CSS - you don't need to use JavaScript at all.

To do that, add a class, say class="tablecell" to your td, and a similar one to your row. Next, add something like this to your main.css:

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

So that's two thirds of a job done - rows and cells!

Columns are harder because they don't have a dedicated element to watch for hovering. Instead, we can use a bit of a CSS hack - make a huge highlighting element, and clip the edges where it spills above and below the table.

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

Live Example:

Putting it all together, we get something like this:

 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 Solution

If you'd rather use JavaScript directly to avoid the above CSS hack, you can do that too. Your mouseOverTd function then needs to log which row and column are currently being hovered over. The ng-class attribute then needs to check whether the currently hovered row and column matches this cell's row or column.

Something like this:

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;
        };
    });

And your HTML (or rather Jade):

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

Of course, you then need to make sure to reset hoveredCol and hoveredRow when the mouse leaves the table, so also add something like this:

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

Live Example:

Putting that all into practice, we get something like this:

 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>