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;
?>
