为条纹表添加样式，包括悬停功能

Posted 2023-05-08

【中文标题】为条纹表添加样式，包括悬停功能

【英文标题】：Add style for striped table including hover function

【发布时间】：2019-11-14 23:31:57

【问题描述】：

我有一张条纹风格的桌子：

<div class="container" ng-app="sortApp" ng-controller="mainController">
  <table class="profile-table">
    <thead>
      <tr>
        <th>MONTH</th>
        <th>PROJECT</th>
        <th>ACHIEVEMENT (%)</th>
        <th>TOTAL OUTPUT</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="bnty in bntyList">
        <td hover-class="hover" ng-if="!bnty.catRowMatch" rowSpan="bnty.rows"> bnty.month  </td>
        <td hover-class="hover"> bnty.ih_project </td>
        <td hover-class="hover"> bnty.ih_output </td>
        <td hover-class="hover" ng-if="!bnty.catRowMatch" rowSpan="bnty.rows"> bnty.ih_sum_output </td>
      </tr>
    </tbody>
  </table>
</div>

目前我想实现两件事：

根据跨行更改条纹样式。

现在是这样的：

但我想这样：

2.我也想悬停。有没有办法像这样悬停整行：

这里是fiddle

【参考方案1】：

我对您的代码进行了一些更改。也许它会帮助你解决你的问题。

小提琴：fiddle

angular.module('sortApp', [])

  .controller('mainController', function($scope) 
    $scope.bntyList = [
        month: "January",
        ih_project: "FRS BGD COL",
        ih_output: "12.00",
        ih_sum_output: "65.00",
        catRowMatch: false,
        rows: 3
      ,
      
        month: "January",
        ih_project: "FRS BGD LYT",
        ih_output: "34.30",
        ih_sum_output: "65.00",
        catRowMatch: true,
        rows: 2
      ,
      
        month: "January",
        ih_project: "HRD BGD COL",
        ih_output: "67.60",
        ih_sum_output: "65.00",
        catRowMatch: true,
        rows: 1
      ,
      
        month: "February",
        ih_project: "ENC2 BGD COL",
        ih_output: "77.00",
        ih_sum_output: "80.00",
        catRowMatch: false,
        rows: 2
      ,
      
        month: "February",
        ih_project: "ENC2 BGD LYT",
        ih_output: "90.00",
        ih_sum_output: "80.00",
        catRowMatch: true,
        rows: 1
      
    ];
  );

angular.module('sortApp').directive("hoverClass", function() 
  return 
    restrict: 'A',
    scope: 
      hoverClass: '@'
    ,
    link: function(scope, element) 
      element.on('mouseenter', function() 
        $el = $(this);
        console.log($el);
        $el.parent().addClass("hover");
        /* if ($el.parent().has('td[rowspan]').length == 0)
          $el.parent().prevAll('tr:has(td[rowspan]):first').find('td[rowspan]').addClass("hover"); */
      );
      element.on('mouseleave', function() 
$el.parent().removeClass("hover").prevAll('tr:has(td[rowspan]):first').find('td[rowspan]').removeClass("hover");
      );
    
  ;
);

body 
  padding-top: 50px;


.profile-table 
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
  text-align: left;


.profile-table th,
.profile-table td 
  padding: 1.1rem 0;
  vertical-align: top;
  font-size: 14px;


.profile-table thead th 
  vertical-align: bottom;
  /*border-bottom: 2px solid #ebedf2;*/


.profile-table tbody:nth-of-type(odd) 
  background-color: #F0F0F0;


tbody:hover 
  border: 2px solid #E56590;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container" ng-app="sortApp" ng-controller="mainController">
  <table class="profile-table">
    <thead>
      <tr>
        <th>MONTH</th>
        <th>PROJECT</th>
        <th>ACHIEVEMENT (%)</th>
        <th>TOTAL OUTPUT</th>
      </tr>
    </thead>
    <tbody ng-repeat="bnty in bntyList" ng-if="!bnty.catRowMatch">
      <tr ng-repeat="bnty1 in bntyList" ng-show="(bnty.month == bnty1.month)">
        <td  ng-if="!bnty1.catRowMatch" rowSpan="bnty1.rows" > bnty1.month  </td>
        <td > bnty1.ih_project </td>
        <td > bnty1.ih_output </td>
        <td ng-if="!bnty1.catRowMatch" rowSpan="bnty1.rows" > bnty1.ih_sum_output </td>
      </tr>
    </tbody>
  </table>
</div>