html - Highlight a row on Click not working. CSS precedence -


here's table in html file. have highlight row on click.

<tbody>   <!--display none-->   <!--onclick-->   <tr ng-repeat="case in lastten" ng-click="setselected(case.name)" ng-class="{selected: case.name === idselected}">     <td colspan="1">{{case.name}}</td>     <td colspan="1">{{case.total}}</td>     <td colspan="1">{{case.passed}}</td>     <td colspan="1">{{case.failed}}</td>   </tr> </tbody> 

css- initialtable class above table

table.initialtable {   table-layout: fixed;   width: 100%;   font-family: helvetica, arial, sans-serif;   margin-top: 20px;   margin-bottom: 20px;   border-collapse: collapse;   border-spacing: 0; }  table.initialtable td, th {   border: 1px solid transparent;   height: 40px;   transition: 0.3s;   overflow: hidden; }  table.initialtable th {   font-weight: bold;   text-align: center;   vertical-align: middle; }  table.initialtable td {   text-align: center;   vertical-align: middle; }  table.initialtable tr:nth-child(even) {   background: #f3f7fb; }  table.initialtable tr:nth-child(odd) {   background: #ffffff; }  .initialtable tr:hover td {   background: #eee; }  .selected {   background: red; } 

here's angular code-

 $scope.idselected = null;  $scope.setselected = function(idselected) {    $scope.idselected = idselected;  }; 

so whenever row selected gets class selected , should highlighted. css not working. precedence of .selected below hover ? tried lot of other combinations , didn't work. important isn't working . i've been stuck @ quite while .


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -