Afficher div avec les informations de la ligne courante de la table hover

Question

J'ai une table avec plusieurs lignes, chaque ligne a son propre identifiant. Je veux quand je planerai la rangée, je peux obtenir son ID (je traiterai php pour obtenir les données), et ajouterai à la div (div disparaîtra après le vol stationnaire).

<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

En utilisant JQuery bind table tr vol stationnaire et juste obtenir id de cela.

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

Ici, vous allez avec un exemple d'obtenir Id sur vol stationnaire 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

meilleure façon est d'écrire une fonction de vol stationnaire

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

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

Answer 4

Il vaudra mieux que vous utilisiez l'événement mouseenter au lieu de stationner car l'événement survol sera déclenché lorsque vous passerez votre pointeur sur la ligne et quand vous le quitterez. Il va donc lancer votre requête php deux fois lorsque vous entrez votre pointeur sur une ligne et quand vous partez. Et donc, il va probablement laisser l'info DIV là sur la ligne et il ne va pas s'effacer.

utiliser au lieu mouseenter comme ceci:

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