Question

当我将鼠标悬停在某一行上时，我正试图让按钮显示出来。 $ index变量是表中的总行数。＆＃34;＃r＆＃34; + a.toString（）变量引用表行的id和＆＃34;＃b＆＃34; + 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;}

Answer 2

问题是每次循环运行时，“按钮”变量都会重置。当循环完成运行时，“按钮”仍然是它有史以来的最后一个值。这就是为什么最后一行中的按钮是每当你有东西时总是出现的按钮。相反，您需要从事件处理程序中找到该按钮。此外，您可以在表上使用单个事件处理程序（“委托”）来处理所有行挂起。然后，如果您动态添加/删除表行，则不必担心绑定和解除绑定事件。

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

Answer 3

我会重写这段代码：

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

as

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

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

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

将鼠标悬停在表格中的某一行时显示按钮

3 个答案: