CSS paint the table row when selected in a different color, (2 colored table) -
tr:first-child {background: green } tr {background: blue } tr:nth-child(even) { background-color: red} i got this, table different colored rows, blue , odd red.
now have select part:
.selected { background-color:black; color:white; } and in table problem, once press on red part, nothing happens, except change of text color...but when press on blue ones, works fine...
any suggestions?
here whole html:
<!doctype html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <head> <link rel="stylesheet" type="text/css" href="css/selected.css" /> </head> <body ng-app="appstud"> <div ng-controller="ctrlstud"> <h2>students</h2> <form> <p>id</p> <input ng-model="student.id"> <p>name</p> <input ng-model="student.firstname"> <p>last name</p> <input ng-model="student.lastname"> <p>from</p> <select ng-model="student.mestorodjenja.ime" ng-options="x x in names"> </select> <br> <br> <button ng-click="addstudent(student)">add student</button> <button ng-click="editstudent(student)">save student</button> <button ng-click="deletestudent(student)">delete student</button> <br> <br> </form> <button ng-click="reloadroute()">refresh</button> <button ng-disabled="result.length>0" ng-click="inittables()">init tables</button> <table border=1 name="tablestud" arrow-selector> <tbody> <tr> <td>id</td> <td>first name</td> <td>last name</td> <td>from</td> </tr> <tr ng-repeat="student in result" ng-class="{'selected':$index == selectedrow}" ng-click="setselected(student,$index)"> <td>{{ student.id }}</td> <td>{{ student.firstname }}</td> <td>{{ student.lastname }}</td> <td>{{ student.mestorodjenja.ime }}</td> </tr> </tbody> </table> </div> <br> <br> <a href="http://localhost:8080/creditcardweb/indexnaseljenomesto.html">naseljenamesta</a> <br> <br> <a href="http://localhost:8080/creditcardweb">back</a> <br> <script src="app/app.js"></script> <script src="app/controllers.js"></script> </body> </html>
you should refer class name refer :nth-child selector.
change .selected tr.selected , work fine, @ example:
tr:first-child {background: green } tr {background: blue } tr:nth-child(even) { background-color: red} tr.selected { background-color:black; color:white; }<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr class="selected"> <td>1</td> <td>2</td> </tr> </table>
Comments
Post a Comment