json table onmouseover for every row problem

json table onmouseover for every row problem

hi all,
i have this code:
<style type="text/css">
.oddtr
{
    background-color:#EFF1F1;
}
.eventr
{
    background-color:#F8F8F8;
}
.trover
{
    background-color: #0099CC;
}
.trclick
{
    background-color: #00CCCC;
}
</style>

$(document).ready(function() {
     var $table = $('table.paginated');
 

  $.ajax({
          url: 'pjson_form.php',
          data: 'action=get_json',
          dataType: 'json',
          type: 'post',
          error: function() {
           alert("Failed to submit");
           return true;
            },
          success: function (j)
          {
          if (j.bu) {
           $.each(j.bu, function(lineIndex, line) {
               var result='';
           result += '<tr>';
           result += '<th><input type="hidden" value="'+ line.id  + '"></th>';
               result += '<th>' + line.iso2 +  '</th>';
               result += '<th>' + line.cname +  '</th>';
               result += '<th>' + line.name +  '</th>';
               result += '<th>' + line.mobile +  '</th>';
           result += '</tr>';
               $('table.sortable > tbody:last').append(result);
             });
           }
         
         }
       });
         return false;

$('table.sortable > tr').mouseover(function() {
 $(this).addClass("trover");}).mouseout(function() {$(this).removeClass("trover");}).click(function() {$(this).toggleClass("trclick");});



});

</script>
</head>
<body>
<table class="sortable paginated">
<thead>
<tr>
<th>B</th>
<th>Country</th>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
 
it works well but the last part:
$('table.sortable > tr').mouseover(function() {
 $(this).addClass("trover");}).mouseout(function() {$(this).removeClass("trover");}).click(function() {$(this).toggleClass("trclick");});

does not work, how can change bg color of every row(tbody tr) of the table onmouseover,
thanks a lot