javascript - Issue with alternating colors row table with selectable rows -

i having issue generated table has alternating rows , rows selectable.

$(document).ready(function() {    $("tr").click(function() {      $(this).toggleclass("highlighted");    })  });

table {    width: 100%;    border-collapse: collapse;    table-layout: auto;    vertical-align: top;    margin-bottom: 15px;    border: 1px solid #999999;  }  th {    font: bold 11px"trebuchet ms", verdana, arial, helvetica, sans-serif;    color: #f2edeb;    border-right: 1px solid #c1dad7;    border-bottom: 1px solid #c1dad7;    border-top: 1px solid #c1dad7;    letter-spacing: 2px;    text-transform: uppercase;    text-align: left;    padding: 6px 6px 6px 12px;    background: #522d25 url(images/bg_header.jpg) no-repeat;  }  tr {    background: #fff;    color: #261f1d;  }  tr:hover,  tr.alt:hover {    color: #261f1d;    background-color: #e5c37e;  }  .highlighted {    color: #261f1d;    background-color: #e5c37e;  }  tr.alt {    background: #f5fafa;    color: #b4aa9d;  }  td {    border-right: 1px solid #c1dad7;    border-bottom: 1px solid #c1dad7;    padding: 6px 6px 6px 12px;  }  tr:nth-child(odd) {    background-color: #ffffff;  }  tr:nth-child(even) {    background-color: #f2f2f2;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <table id="foobar" border="0">    <tr>      <th>text</th>      <th>text</th>      <th>text</th>      <th>text</th>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>  </table>

my problem this: if put alternating colors, select row table function not work, if remove ... works again. ideas?

i need dynamically create table alternating rows selectable. want able use basic, don't need functionality of datatables library.

you'll need reorganize rules slightly. in original demo pseudo selector tr:nth-child(odd) or tr:nth-child(even) has higher specificity .highlighted. have add same tr selector .highlighted becomes tr.highlighted, , move below pseudo selectors, last loaded rules applied equal specificity selectors.

tr:nth-child(odd) {   background-color: #ffffff; } tr:nth-child(even) {   background-color: #f2f2f2; } tr.highlighted {   color: #261f1d;   background-color: #e5c37e; } tr:hover {   color: #261f1d;   background-color: #e5c37e; } 

see updated demo below.

$(document).ready(function() {    $("tr").click(function() {      $(this).toggleclass("highlighted");    })  });

table {    width: 100%;    border-collapse: collapse;    table-layout: auto;    vertical-align: top;    margin-bottom: 15px;    border: 1px solid #999999;  }  tr {    background: #fff;    color: #261f1d;  }  th {    font: bold 11px"trebuchet ms", verdana, arial, helvetica, sans-serif;    color: #f2edeb;    border-right: 1px solid #c1dad7;    border-bottom: 1px solid #c1dad7;    border-top: 1px solid #c1dad7;    letter-spacing: 2px;    text-transform: uppercase;    text-align: left;    padding: 6px 6px 6px 12px;    background: #522d25 url(images/bg_header.jpg) no-repeat;  }  td {    border-right: 1px solid #c1dad7;    border-bottom: 1px solid #c1dad7;    padding: 6px 6px 6px 12px;  }  tr:nth-child(odd) {    background-color: #ffffff;  }  tr:nth-child(even) {    background-color: #f2f2f2;  }  tr.highlighted {    color: #261f1d;    background-color: #e5c37e;  }  tr:hover {    color: #261f1d;    background-color: #e5c37e;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <table id="foobar" border="0">    <tr>      <th>text</th>      <th>text</th>      <th>text</th>      <th>text</th>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>    <tr class="">      <td>text</td>      <td>image</td>      <td>text</td>      <td>image</td>    </tr>  </table>