顯示帶有當前表格行懸停信息的 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>