javascript - 将鼠标悬停在表格中的特定行上时显示按钮

Question

当我将鼠标悬停在某一行上时，我试图显示一个按钮。 $index 变量是表中的总行数。 "#r"+a.toString() 变量指的是表行的id，"#b"+a.toString() 指的是当我悬停在某个地方时我想显示的行的按钮表的行。目前，每当我将鼠标悬停在任何行上时，它都会在最后一行显示按钮。

<script type="text/javascript">
    $(document).ready(function (){
        for(a=1; a <= <?php echo $index; ?>; a++){
        var button = $("#b"+a.toString());
        $("#r"+a.toString()+" td").mouseover(function(){
            button.css({"visibility": "visible"});
        });
        $("tr td").mouseout(function(){
            button.css({"visibility": "hidden"});
        });
    }
    });
</script>



<table class="table table-striped table-bordered table-condensed table-hover">
                    <thead>
                        <tr> 
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <?php 
                        $item_array;
                        $index = 0;
                        $index_2 = 1;
                        $r = "r";
                        $b="b";
                        foreach ($item_array as $id_array){ ?>

                            <tr id="<?php echo $r.$index_2; ?>">
                             <td><?php echo $item_array[$index] ?></td>
                                <td> <?php echo $quantity_array[$index] ?></td>
               <td>   
                        <form method='POST' action='edit.php'>
                            <?php echo $price_array[$index];?>
                            <button id="<?php echo $b.$index_2; ?>" type="button" style="float:right; visibility:hidden; align-content:right;" class="btn btn-sm btn-warning">Edit</button>
                        </form>
                    </td><?php
                        $index++;
                        $index_2++;

                        echo "</tr>";
                        } ?>

                </table>

Answer 1

当简单的遍历就足够时，使用 ID 会使这比需要的更复杂。

$(function(){
    $('tr').hover(function(){ /* hover first argument is mouseenter*/
        $(this).find('button').css({"visibility": "visible"});
    },function(){  /* hover second argument is mouseleave*/
       $(this).find('button').css({"visibility": "hidden"});
    });

});

为了更细化，给按钮一个通用类。

更简单的是单独使用 CSS

button.buttonCLass{ visibility: hidden;}
tr:hover button.buttonCLass{ visibility: visible;}