5

クラス.theClassのテーブルがあります。テーブルには2つの列しかありません。

列全体を選択して、列全体をホバーイベントに影響させることはできますか？

その列のいずれかの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

列ごとに異なるクラス（例：、、、など）を作成するだけcol1でcol2、col3列番号に基づいて選択および変更できます。

だから（いくつかの非常にハッキーなコード）：

$('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では不可能であり、根本的な理由は列が要素を構成しないことです。要素を使用することはできますcolが、実際には列要素ではありません。子としてのセルは含まれず、セルに一部のプロパティを設定するためにのみ使用できるため、col要素をホバーするという概念はありません。

したがって、セルには列に対応する親または祖先がないため、親セレクターでさえ役に立ちません。

于 2012-12-04T22:54:06.817 に答える
0

私はこれAngularJSを私の方法と両方のモデルwith and without using controllerで解決します、そしてあなたはこれらを簡単に理解できるに違いありません。MVVMMVC

プレーンテーブル行あり（なし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 に答える
0

CSSのみを使用して、前の回答のように属性を変更することはできません。しかし、ホバーしたセルの列の背景色を変更する必要があるという同様の問題に直面していました。私は私の問題を使用して解決するためのトリックを手に入れました

td:hover::after

https://css-tricks.com/simple-css-row-column-highlighting/をチェック して、自分で試すことができます。

于 2020-03-11T16:35:28.530 に答える