显示带有当前表格行悬停信息的 div

Question

我有一个有很多行的表，每一行都有自己的 id。 我希望当我悬停该行时，我可以获得它的 ID（我将处理 php 以获取数据），并附加到 div（悬停后 div 将淡出）。

    <table id="listtemp" class="table datatable">
        <thead>
            <tr>
                <th>Số PO</th>
                <th>Số hợp đồng</th>
                <th>Số hóa đơn</th>
                <th>Doanh nghiệp</th>
                <th>Người mua</th>
                <th>Sales</th>
                <th>Ngày tạo</th>
                <th>Tình trạng</th>
                <th>Chi tiết</th>
            </tr>
        </thead>
        <tbody>
        <?php
               for($i = 0; $i < 10; $i++){
        ?>
            <tr id="<?=$i;?>">
                <td></td>
                <td></td>
                <td></td>
                <td></td>                    
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        <?php } ?>
        </tbody>
    </table>              

Answer 1

使用 JQuery 绑定table tr悬停并从中获取id 。

 $('#waypointsTable tr').hover(function() { console.log($(this).attr('id')); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <table id="waypointsTable" border="1"> <tbody> <tr id="1"> <td>some text</td> </tr> <tr id="2"> <td>some text</td> </tr> <tr id="3"> <td>some text</td> </tr> </tbody> </table>

Answer 2

这里有一个在悬停时获取 Id 的示例https://jsfiddle.net/r6tbv9uz/

 $('table tbody tr').hover(function(){ console.log($(this).attr('id')) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr id="1"> <td>test</td> </tr> <tr id="2"> <td>test</td> </tr> <tr id="3"> <td>test</td> </tr> <tr id="4"> <td>test</td> </tr> </tbody> </table>

Answer 3

最好的方法是编写一个悬停功能

$('#table tr').on('hover',function(){

var id =  $(this).attr('id');
 })

Answer 4

如果您使用mouseenter事件而不是悬停会更好，因为当您将指针放在行上以及何时离开它时，都会触发悬停事件。 因此，当您在一行中输入指针和离开时，它将两次启动您的 php 请求。 因此，它可能会将信息 DIV 留在行上，并且不会淡出。

而是像这样使用 mouseenter ：

$('table tbody tr').on('mouseenter',function(){
    var id =  $(this).attr('id');
});

Answer 5

In the beiginning add class hidden to tbody.
<script>
$("#listtemp tr").hover(function (){
    id = $(this).attr('id');
    $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'name of php file to get data',
            data: { id: id }, //sending id to php file
            success: function(response) {
                $('tbody').removeClass('hidden');
                $('tbody').fadeOut();
            }
        });
    });
})
</script>