Question

I dynamically added rows to a table but it doesn’t seem to take hover effects given in jquery…

Here is my code,

 <table  id="chkbox" cellpadding="0" cellspacing="2" width="100%" class="table_Style_Border">
        <tr>
            <td style="width:150px" class="grid_header" align="center">RackName</td>    
            <td style="width:150px" class="grid_header" align="center">LibraryName</td>  
            <td style="width:200px" class="grid_header" align="center">LibrarianName</td>
            <td style="width:200px" class="grid_header" align="center">Location</td>
            <td style="width:1%" class="grid_header"></td>


        </tr>

         <? if(isset($comment))
               { echo '<tr><td class=table_label colspan=5>'.$comment.'</td></tr>'; } ?>
        <?php foreach($rackData as $key =>  $row) { ?>
        <?php printf('<tr  class="%s">', ($key % 2) ? 'rowcolor' : 'alternaterowcolor'); ?>
            <td align="left" class="table_label">
                    <?=$row['rack_name']?>
            </td>
            <td align="left" class="table_label">
                    <?=$row['library_name']?>
            </td>
            <td align="center" class="table_label">
                    <?=$row['librarian']?>
            </td>
            <td align="center" class="table_label">
                    <?=$row['location']?>
            </td>
            <td align="center">
                <input type="checkbox" name="group" id="group" value="<?=$row['rack_id']?>" onclick="display(this);"  > 
            </td>

        </tr>

<?  } ?>


        </table><div align="right" class="pagination"> <?php /*?><?php echo $links;?><?php */?></div>
<script type="text/javascript">
$("#chkbox").hover(function() {
  $(this).addClass("resultshover");
}, function() {
  $(this).removeClass("resultshover");
});
</script>

Answer 1

Your code looks correct for the most part, but I believe the problem is you must call your Javascript in the $(document).ready() function, like this:

$(document).ready(function() {
    $('#chkbox tr').hover(function() {
        $(this).addClass('resultshover');
    }, function() {
        $(this).removeClass('resultshover');
    });
});