wrap() and wrapAll() methods are not working as expected
Here is my code.. I am trying to wrap TBODY in DIV to have scroll for the tbody.. but it is not working as I am expected.
Please help me out / gimme the reason why it is not working / have anybody experienced the same problem?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table.tableda > tbody").wrapAll("<div style='border: 2px solid #cc0000; overflow-y:scroll; height:100px;'></div>");
});
</script>
<style type="text/css">
.first_Div {
color: #acc;
font-weight: bold;
}
.tableda {
border: 2px solid #123456;
}
</style>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<table class="tableda" border="1">
<tbody>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
<tr><td>Chumma</td></tr>
</tbody>
</table>
</body>
</html>