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

【问题标题】：Show div with information for the current table row hover显示包含当前表格行悬停信息的 div
【发布时间】：2017-07-19 07:21:50
【问题描述】：

我有一个有很多行的表，每一行都有自己的 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>

【问题讨论】：

那么你的问题是什么？
我不知道如何获取我悬停的每一行的 id
将您的表格结构添加到问题中
请出示代码。

标签： javascript jquery hover jquery-hover mousehover

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

最好的办法是写一个悬停函数

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

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

【讨论】：

【解决方案4】：

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

改为像这样使用 mouseenter：

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

【讨论】：

【解决方案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>

【讨论】：