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

Question

我有一件 table 条纹款式：

<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.Same 我想用悬停来做。有没有办法像这样悬停整行：

这里是fiddle

Answer 1

我对你的代码做了一些修改。说不定能帮到你解决问题。

Fiddle: 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>

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

Add style for striped table including hover function

css

jquery

angularjs

angularjs-directive