here is my code:\[code\]<script type="text/javascript">$(function(){ $("input[type='button']").click(function(){ $("#table tbody").append($("<tr>").append($("<td>").text("new"))); }); /*double-color effect*/ $("#table tbody tr:even").css({"background":"lightgray"}); $("#table tbody trdd").css({"background":"white"});});</script></head><body><input type="button" value="http://stackoverflow.com/questions/15523034/click" /><table id="table"> <tbody> <tr><td>hello</td></tr> <tr><td>world</td></tr> <tr><td>I am here</td></tr> </tbody></table></body>\[/code\]I want the newly create \[code\]tr\[/code\] elements also have double-color effect, but they don't, I want to know if jquery can support applying css dynamically, just like \[code\]live()\[/code\] or \[code\]on()\[/code\] methods do? And I can also use \[code\]nth-child\[/code\] selector, code like this:\[code\] tr:nth-child(odd){ background:lightgray;}tr:nth-child(even){ background:white;}\[/code\]But just like w3cschools said, it does not support IE8 and earlier version, I don't know whether the earlier versions of other major browsers like chrome, firefox and sofari also support this selector? So, is there a highly compatible way to do this?