如何突出显示表格角度 6 中的列

Question

我试图在悬停时突出显示表格中的整个列。

谁能帮助我如何在 angular2+ 中实现这一点

我需要和下图一模一样

参考图片

Answer 1

我假设您正在尝试使用它，以便您可以单击一行并突出显示该行，类似于列。

如果是这样，您可以尝试以下方法：

为长度与列数相等的列创建一个数组，对于行也是如此。 tableRowHighlights: Array<boolean> = []; tableColumnHighlights: Array<boolean> = [];
用错误值填充它们，然后在生成表格时为每个单元格分配一个 CSS 类，该类将根据行或列索引突出显示它：
[class.colSelected]="tableColumnHighlights[4]"

现在，当 tableColumnHighlights[4] 为真时，每个指定 4 的单元格都将获得 colSelected 类，该类将具有您的突出显示。

然后您可以在每个单元格上设置交替状态的点击侦听器：
(click)="tableColumnHighlights[4] = !tablecolumnHighlights[4]"

对行做同样的事情。如果您愿意，您也可以只将监听器放在列的 thead 元素上。

希望这就是你所追求的。

Answer 2

你可以使用 :before 和 :after

td:hover::before {
    background-color: #ffa;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}


td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

Fiddle 中的完整工作示例： https://jsfiddle.net/0vm7pkj4/1/

Answer 3

试试这个我认为对你有用的代码。

var test = angular.module('test', []);

test.controller('testController', function($scope) {
  var testCtrl = this;
  testCtrl.data = [
    {col1: '0342', col2: '234', col3: '642356', col4: 'Black', col5: 'Item 1', col6: true},
    {col1: '0533', col2: '775', col3: '223542', col4: 'Green', col5: 'Item 2', col6: true},
    {col1: '0973', col2: '284', col3: '997546', col4: 'Purple', col5: 'Item 3', col6: false},
    {col1: '0125', col2: '997', col3: '285734', col4: 'Orange', col5: 'Item 4', col6: false},
    {col1: '0432', col2: '132', col3: '996445', col4: 'White', col5: 'Item 5', col6: true}
  ];
  
  testCtrl.structure = [
    {field: 'col1', display: 'Col 1', class: 'col1'},
    {field: 'col2', display: 'Col 2', class: 'col2'},
    {field: 'col3', display: 'Col 3', class: 'col3'},
    {field: 'col4', display: 'Col 4', class: 'col4'},
    {field: 'col5', display: 'Col 5', class: 'col5'},
    {field: 'col6', display: 'Col 6', class: 'col6'}
  ];
  
  drag = event => {
    var index = angular.element(event.target).scope().$index;
    event.dataTransfer.setData("dragIndex", index);
  };
   
  drop = event => {
    event.preventDefault();
    var dropElement = angular.element(event.target);
    var dragIndex = event.dataTransfer.getData("dragIndex"); 
    var dropIndex = dropElement.scope().$index;
    
    var column = testCtrl.structure[dragIndex];
    testCtrl.structure.splice(dragIndex, 1);
    
    var insertIndex = dragIndex > dropIndex ? dropIndex : dropIndex - 1;
    if (event.offsetX > dropElement[0].scrollWidth / 2)
      insertIndex++;
    
    testCtrl.structure.splice(insertIndex, 0, column);
    $scope.$digest();
  };
});

.container {
  text-align: center;
}

table {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(100%);
}

table, th, td {
  border: 1px solid #000;
}

th, td {
  padding: 10px;
}

td {
  text-align: left;
}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6 {
  background-color: #fff;
}

.col6 {
  text-align: center;
}

.col1:hover,
.col2:hover,
.col3:hover,
.col4:hover,
.col5:hover,
.col6:hover {
  background-color: #DAA520;
}

<div class="container" ng-app="test" ng-controller="testController as testCtrl">
  <table>
    <thead>
      <tr>
        <th ng-repeat="header in testCtrl.structure" 
            class="{{header.class}}" 
            draggable="true"
            ondragover="event.preventDefault();"
            ondragstart="drag(event);"
            ondrop="drop(event);">
                {{header.display}}
        </th>      
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in testCtrl.data">
        <td ng-repeat="body in testCtrl.structure" ng-switch="body.field" class="{{body.class}}">
          <div ng-switch-when="col6">
            <i class="fa" ng-class="{'fa-file': row[body.field], 'fa-file-o': !row[body.field]}"></i>
          </div>
          <div ng-switch-default>{{row[body.field]}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

尝试通过您的表格类使用悬停效果，希望这会有所帮助

.MyTable td:hover {
   background-color: #ccc;
}