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

Question

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

有人可以帮助我如何在angular2 +中实现这一目标

我需要与下图完全一样

参考图片

Answer 1

您可以使用：before和：after

escape()

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

Answer 2

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

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

Answer 3

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

如果是这样，您可以尝试以下操作：

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

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

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

对行执行相同的操作。如果愿意，也可以只将监听器放在列的thead元素上。

希望这就是你所追求的。

Answer 4

尝试此代码，我认为这对您有用。

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>