I have the content with stripped odd and even bar. It works fine except when the data of <div id=sc_body> comes from ajax. In the following sample code, if I click the menu1, the content is updated with html but the stripped class will not fit into. That means odd and even class are not added to. I need to the following two lines again after $("#sc_body").html(msg); in the .ajax {} call. $('.strip tr:not([th]):odd').addClass('odd'); $('.strip tr:not([th]):even').addClass('even'); Is there any other method to overcome this problem ?
testajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html><head> <?php echo "<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"; ?> <script type="text/javascript" src="lib/jquery/jquery.js"></script> <script> $(document).ready(function() { $('.strip tr:not([th]):odd').addClass('odd'); $('.strip tr:not([th]):even').addClass('even'); $('#sm_cmd a').click(function() { $.ajax({ type: "get",url: "testajax2.php",data: "op=menu1", success: function(msg){ $("#sc_body").html(msg); } }); }); }); </script> <style type="text/css"> #sm_main {margin:0; padding:5px 10px 5px 10px;} #sm_body {border:2px solid #2F5376; padding:5px; background- color:#ECECEC; font-size:1em;} #sm_cmd {text-align:center;} #sb_main {margin:0; padding:5px 10px 5px 10px;} #sf_body {border:2px solid #2F5376; background-color:#ECECEC; font- size:1em;} #sc_body {font-size:1em; text-align:left;} .strip tr.odd td {background-color: #e9e9e9; padding: 3px;} .strip tr.even td {background-color: #dee3e7; padding: 3px;} </style> </head> <body> <?php $content = "<table width=\"100%\" class=\"strip \"><tbody><tr><td>item1</td></tr><tr><td>item2</td></tr></tbody></ table>"; outputPage($content); echo "</body></html>"; return; // output full page function outputPage($content) { $cmd = "<a href=\"#\">menu1</a>"; ?> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr><td id="sm_main"> <div id="sm_body"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr><td id="sm_cmd"><?php echo $cmd;?></td></tr> </tbody> </table> </div> </td></tr> <tr><td id="sb_main"> <div id="sb_body"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr><td id="sf_main"> <div id="sf_body" style="display:none; opacity:0; visibility:hidden;"> </div> </td> <td id="sc_main"> <div id="sc_body"> <?php echo $content; ?> </div> </td> </tr> </tbody> </table> </div> </td></tr> </tbody> </table> <?php } ?> testajax2.php <?php $content = "<table width=\"100%\" class=\"strip \"><tbody><tr><td>item3</td></tr><tr><td>item4</td></tr></tbody></ table>"; echo $content; ?>