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

Question

I have a table with many rows, each row has each own id. I want when i hover the row, i can get it's ID (i will process php to get the data), and append to the div (div will fade out after hover).

    <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

Using JQuery bind table tr hover and just get id from that.

 $('#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

Here you go with an example of getting Id on hover 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

best way is to write a hover function

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

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

Answer 4

It will be better if you use mouseenter event rather than hover because hover event will be triggered when you will take your pointer on the row and when you will leave it. So it will initiate your php request two times when you enter your pointer on a row and when you leave. And so, probably it will leave the info DIV there on the row and it will not fadeout.

Instead use mouseenter like this:

$('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>