Как выделить столбец в таблице угловой 6

Question

Я пытаюсь выделить весь столбец в таблице при наведении курсора.

Может ли кто-нибудь помочь мне, как я могу добиться этого в angular2 +

Мне нужно точно так, как показано на рисунке ниже

контрольное изображение

Answer 1

Вы можете использовать: до и после:

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 2

Попробуйте этот код, я думаю, он вам пригодится.

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

Попытайтесь использовать эффект наведения через ваш класс таблицы, надеюсь, это поможет

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