Question

我有一个类.theClass的表。该表只有两列。

是否可以选择整个列并在悬停事件中影响整个列？

当该列的任何td悬停时，想要更改列中所有td的背景颜色。

非常感谢提前！

Answer 1

在AngularJS我会这样解决：

HTML：

<td class='sometdstyle'
    ng-class="{ 'active': isActiveCol[0]}"
    ng-mouseover="isActiveCol[0]=true" 
    ng-mouseleave="isActiveCol[0]=false">

controller或ng-init（初始值）：

$scope.isActiveCol = [ false, false ];

的CSS：

.className td.active { background-color:black; }

- 或 -

.className .sometdstyle.active { background-color:black; }

如果矩阵大于2x2并且单元格的内容是可编程的，那么ng-repeat可以解决更复杂的问题。

Answer 2

在CSS4父选择器出现之前，我认为你必须使用JavaScript。这是一个jQuery解决方案，不需要对表的标记进行任何更改。当一个列悬停时，它会计算它在行内的位置（thisIndex），并将类“active”应用于在其父行中具有相同位置（索引）的任何列。

演示：http://jsbin.com/obeyix/1

    var $td = $('table td'); // Place outside hover function for performance reasons

    $('td').bind('hover', function() {

        // Position of hovered column within this row
        var thisIndex = $(this).parents('tr').find('td').index( $(this) );

        // Add active class to all columns that have the same index as the hovered one
        $('table tr td:nth-child(' + (thisIndex+1) + ')').addClass('active');

    // Remove active class when mouse leaves a cell
    }).bind('mouseleave', function() {
        $td.removeClass('active');
    });

Answer 3

这在CSS中是不可能的，并且根本原因是列不构成元素。您可以使用col元素，但它们实际上不是列元素：它们不包含单元格作为子元素，并且它们只能用于在单元格上设置某些属性，因此没有悬停{{{的概念1}}元素。

因此，即使是父选择器也无济于事，因为单元格没有与列对应的父级或祖先。

Answer 4

只需为每列添加不同的课程（例如：col1，col2，col3等），然后您就可以根据列号进行选择和更改。

所以（一些非常hacky的代码）：

$('td').on('mouseover', function(){

    var className = $(this).attr('class');
    var column = className.match(/\d+$/);
    var columnNumber = column[0];

    $('td.col' + columnNumber).(do something)
});

Answer 5

在 AngularJS 中，我在with and without using controller中以 MVVM 的方式解决这个问题MVC这两种型号，我打赌你可以理解这些。

使用普通表行（不含ng-repeat）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change table column background using AngularJS</title>
    <style>
        .notth:hover{
            background:rgba(20,200,0,0.5);
        }
        /*If want to change hover background for thead rows also.*/
        /**** then remove the above style class.***/
        /*th:hover{
            /*background:rgba(20,200,0,0.5);*/
        /*}*/
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>

<table border="0" width="500">
    <thead>
        <col width="150"/>
        <col width="150"/>
        <col width="150"/>
        <th>First Column</th>
        <th>Second Column</th>
        <th>Third Column</th>
    </thead>
    <tr class="notth">
        <td ng-style="tdaStyle" ng-mouseover="tdaStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdaStyle={}">This is A</td>
        <td ng-style="tdbStyle" ng-mouseover="tdbStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdbStyle={}">This is B</td>
        <td ng-style="tdcStyle" ng-mouseover="tdcStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdcStyle={}">This is C</td>
    </tr>

    <tr class="notth">
        <td ng-style="tdaStyle" ng-mouseover="tdaStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdaStyle={}">This is C</td>
        <td ng-style="tdbStyle" ng-mouseover="tdbStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdbStyle={}">This is D</td>
        <td ng-style="tdcStyle" ng-mouseover="tdcStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdcStyle={}">This is A</td>
    </tr>

    <tr class="notth">
        <td ng-style="tdaStyle" ng-mouseover="tdaStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdaStyle={}">This is E</td>
        <td ng-style="tdbStyle" ng-mouseover="tdbStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdbStyle={}">This is F</td>
        <td ng-style="tdcStyle" ng-mouseover="tdcStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdcStyle={}">This is B</td>
    </tr>

    <tr class="notth">
        <td ng-style="tdaStyle" ng-mouseover="tdaStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdaStyle={}">{{tdaStyle}}</td>
        <td ng-style="tdbStyle" ng-mouseover="tdbStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdbStyle={}">{{tdbStyle}}</td>
        <td ng-style="tdcStyle" ng-mouseover="tdcStyle={'background':'rgba(20,200,0,0.5)'}"
            ng-mouseleave="tdcStyle={}">{{tdcStyle}}</td>
    </tr>

</table>

</body>
</html>

使用ng-repeat指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change table column background using AngularJS</title>
    <style>
        .notth:hover{
            background:rgba(20,200,0,0.5);
        }
        .tdStyle{
            background:rgba(20,200,0,0.5);
        }
        /*If want to change hover background for thead rows also.*/
        /**** then remove the above style class.***/
        /*th:hover{
            /*background:rgba(20,200,0,0.5);*/
        /*}*/
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
        var app = angular.module("MyApp", []);
        app.controller("HomeController", function($scope){

            $scope.init = function(){
                $scope.data =
                    [{first:"This is A", second:"This is B", third:"Third is C"},
                        {first:"This is B", second:"This is C", third:"Third is D"},
                        {first:"This is C", second:"This is D", third:"Third is E"},
                        {first:"This is D", second:"This is E", third:"Third is F"},
                        {first:"This is E", second:"This is F", third:"Third is G"}];

                $scope.msg = "";
                $scope.reset_td_Styles();
            };

            $scope.reset_td_Styles = function(){
                $scope.td0Style = "";
                $scope.td1Style = "";
                $scope.td2Style = "";
            };

            $scope.changeClass = function(styleName, className){
                $scope.msg = styleName.toString();

                $scope.reset_td_Styles();

                switch(styleName){
                    case "td0Style":$scope.td0Style=className;break;
                    case "td1Style":$scope.td1Style=className;break;
                    case "td2Style":$scope.td2Style=className;break;
                }
            };
        });
    </script>
</head>

<body ng-app="MyApp" ng-controller="HomeController" ng-init="init()">

<table border="0" width="500">
    <thead>
        <col width="150"/>
        <col width="150"/>
        <col width="150"/>
        <th>First Column</th>
        <th>Second Column</th>
        <th>Third Column</th>
    </thead>

    <tr class="notth" ng-repeat="item in data">

        <td ng-class="td0Style" ng-mouseenter="changeClass('td0Style', 'tdStyle')"
            ng-mouseleave="changeClass('td0Style', '')">{{item.first}}</td>

        <td ng-class="td1Style" ng-mouseenter="changeClass('td1Style', 'tdStyle')"
            ng-mouseleave="changeClass('td1Style', '')">{{item.second}}</td>

        <td ng-class="td2Style" ng-mouseenter="changeClass('td2Style', 'tdStyle')"
            ng-mouseleave="changeClass('td2Style', '')">{{item.third}}</td>

    </tr>

</table>

<div>td0Style is : {{td0Style}}</div>
<div>td1Style is : {{td1Style}}</div>
<div>td2Style is : {{td2Style}}</div>
<div>Message is : {{msg}}</div>

</body>
</html>

简单易懂的新手也可以轻松理解。

Answer 6

仅使用CSS，我们无法根据先前的答案更改属性。但是我遇到了类似的问题，需要更改悬停的单元格的列的背景颜色。我有个技巧来解决

td:hover::after

您可以选中https://css-tricks.com/simple-css-row-column-highlighting/自己尝试。

在悬停时更改列背景颜色

6 个答案: