Question

我动态地将行添加到表中，但它似乎没有采用jquery中给出的悬停效果......

这是我的代码，

 <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

您的代码在大多数情况下看起来都是正确的，但我认为问题是您必须在$(document).ready()函数中调用您的Javascript，如下所示：

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

Jquery悬停功能不适用于表

1 个答案: