現在のテーブル行のホバーに関する情報を表示する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

あなたはhttps://jsfiddle.net/r6tbv9uz/

$('table tbody tr').hover(function(){ 
 
\t 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イベントを使用すると、行にポインタを置いたときと離れるときにホバーイベントがトリガーされるので、より良いでしょう。 これは、行にポインタを入力したときと離れるときに、2回あなたの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>