$(document).ready(function() { $("tr:odd").css({ "background-color":"#000", "color":"#fff"}); });
tbody td{ padding: 30px; } tbody tr:nth-child(odd){ background-color: #4C8BF5; color: #fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>13</td> </tr> </tbody> </table>
There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
tr:nth-child(even) background-color: #000000; }
Note: No support in IE 8.
Or, if you have jQuery:
$(document).ready(function() { $("tr:even").css("background-color", "#000000"); });