javascript - Targeting even rows of table through jQuery -
i want give orange color rows through jquery in table.
but not working me.
below html code:
<!doctype html> <html lang="en"> <head> <title> </title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/custom.css" /> </head> <body> <table class="mytable"> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> </tr> </table> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/custom.js" ></script> </body> </html>
below code in custom.css
:
table,table td{ border: 1px solid white; background: green; color: white; } .highlight{ background: orange; }
below code in custom.js
:
$(document).ready(function(){ $('.mytable tr:even').addclass('.highlight'); });
i beginner in jquery.
i looking short , simple way.
you dont need jquery effect. unless, have specific use case / requirement, use odd, pseudo classes accomplish need.
here sample.
table, table td { border: 1px solid white; background: green; color: white; } table tr:nth-child(even) td { background-color: orange; } .highlight { background: orange; }
<table class="mytable"> <tr> <td> 1 </td> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> </tr> <tr> <td> 7 </td> <td> 8 </td> </tr> </table>
Comments
Post a Comment