将鼠标悬停在表中的某一行上时显示按钮 - Display button when hover over certain row in table

Display button when hover over certain row in table

我正试图在鼠标悬停在某一行时显示一个按钮。$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>

使用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;}

问题是每次循环运行时，您的"button"变量都会重置。当循环运行完毕时，"button"仍然是它所拥有的最后一个值。这就是为什么最后一行的按钮总是在你完成某件事时出现的原因。相反，您需要从事件处理程序中找到按钮。此外，您可以在表上使用单个事件处理程序（"delegate"）来处理所有行悬停。然后，如果动态添加/删除表行，就不必担心绑定和取消绑定事件。

$('table').on('mouseover', 'tr', function(ev) {
    $(this).find('button').css({'visibility': 'visible'});
}).on('mouseout', 'tr', function(ev) {
    $(this).find('button').css({'visibility': 'hidden'});
});

我会重写这段代码：

$("#r"+a.toString()+" td").mouseover(function(){
    button.css({"visibility": "visible"});
});
$("tr td").mouseout(function(){
    button.css({"visibility": "hidden"});
});

作为

$("#r"+a.toString()+" td").mouseover(function () {
    button.css({"visibility": "visible"});
}).mouseout(function () {
    button.css({"visibility": "hidden"});
});

在我看来，您将mouseout事件绑定到文档中任何表的任何单元格的mouseout。在我编写的代码块中，您只将mouseout绑定到具有特定按钮的特定表单元格。

此外，请确保在<?php echo $index; ?>中，$index的类型为int，否则for循环将不起作用。