5

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

是否可以选择整列并使整列受到悬停事件的影响？

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

提前谢谢了！

4

6 回答 6

4

在AngularJS中，我会这样解决：

html:

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

控制器或ng-init（初始值）：

$scope.isActiveCol = [ false, false ];

CSS：

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

-或者-

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

如果矩阵大于 2x2 并且单元格的内容是可编程的，则ng-repeat解决了进一步的复杂性。

于 2013-07-31T00:52:19.453 回答
2

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

演示：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');
    });
于 2012-12-04T22:37:39.037 回答
0

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

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

于 2012-12-04T22:54:06.817 回答
0

只需为每列创建一个不同的类（例如：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)
});
于 2012-12-04T22:16:06.997 回答
0

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

td:hover::after

您可以查看 https://css-tricks.com/simple-css-row-column-highlighting/自己尝试一下。

于 2020-03-11T16:35:28.530 回答
0

在AngularJS我用我的方式解决了这with and without using controller两个模型MVVM，MVC我敢打赌你可以很容易地理解这些。

带普通表行（不带ng-repeat）

使用 AngularJS 更改表格列背景

<!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指令

使用 <code>ng-repeat</code> 指令

<!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>

因为比较容易的新手也能很容易理解。

于 2018-04-13T04:08:08.483 回答