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

您可以在此处获取悬停https://jsfiddle.net/r6tbv9uz/

上的ID的示例

$('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/GET',
            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>

显示包含当前表行悬停信息的div

5 个答案: