2
votes

Comment mettre en évidence la colonne dans le tableau angulaire 6

J'essaye de mettre en évidence la colonne entière dans le tableau au survol.

Quelqu'un peut-il m'aider comment je peux y parvenir dans angular2 +

J'ai besoin exactement comme l'image ci-dessous

image de référence

css angular6 angular7 html-table highlight

0 commentaires

4 Réponses :

0
votes

Essayez d'utiliser l'effet de survol dans votre table Class, j'espère que cela aidera

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

1 commentaires

Cela ne ferait que mettre en évidence la cellule. Je pense que l'OP veut la colonne et la ligne

0
votes

Je suppose que vous essayez de le faire pour que vous puissiez cliquer sur une ligne et mettre cette ligne en surbrillance, comme pour une colonne.

Si tel est le cas, vous pouvez essayer ce qui suit:

Créez un tableau pour les colonnes d'une longueur égale au nombre de colonnes, idem pour les lignes. tableRowHighlights: Array = []; tableColumnHighlights: Array = [];
Remplissez-les avec de fausses valeurs, puis, lors de la génération de votre tableau, attribuez à chaque cellule une classe css qui la mettra en évidence en fonction de l'index de la ligne ou de la colonne:
[class.colSelected] = "tableColumnHighlights [4]"

Maintenant, lorsque tableColumnHighlights [4] est vrai, chaque cellule qui a 4 spécifié gagnera la classe colSelected qui aura votre surlignage.

Ensuite, vous pouvez définir, sur chaque cellule, un écouteur de clic qui alterne l'état:
(click) = "tableColumnHighlights [4] =! tablecolumnHighlights [4]"

Faites la même chose pour les lignes. Vous pouvez également placer l'auditeur uniquement sur les éléments de tête des colonnes si vous le souhaitez.

J'espère que c'est ce que vous recherchiez.

0 commentaires

1
votes

Vous pouvez utiliser: avant et: après

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

Exemple de travail complet dans Fiddle: https://jsfiddle.net/0vm7pkj4/1/

0 commentaires

0
votes

Essayez ce code, je pense que c'est utile pour vous.

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

.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;
}

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();
  };
});

0 commentaires