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

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -