當懸停在表格行上時，如何顯示該行字段數據的內容的彈出窗口？

-6

<html> 

<body> 
    <table id="home-table" class="table table-striped js-dataTable-full table-vcenter" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
     <th class="text-center" style="width: 120px;">Status</th> 
     <th>Vehicle Number</th> 
     <th style="width: 40%;">Address</th> 
     <th style="width: 15%;">Duration</th> 
     <th style="width: 15%;">Current Speed</th> 
     <th>Distance</th> 
     <th class="text-center">A/C (On/Off)</th> 
     <th class="text-center">Ignition</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="font-tr"> 
     <td class="text-center"> 
      <i class="fa fa-bus fa-2x fa-green fa-bus" /> 
     </td> 
     <td class="font-w600">Walter Fox</td> 
     <td>Aundh-Baner Road, Pune</td> 
     <td>36 Mins</td> 
     <td>72 Km/hr</td> 
     <td>30 Km</td> 
     <td class="font-td"> 
      <span class="label label-success">On</span> 
     </td> 
     <td class="font-td"> 
      <span class="label label-success">On</span> 
     </td> 

     </tr> 

     <tr class="font-tr"> 
     <td class="text-center"> 
      <i class="fa fa-bus fa-2x fa-yellow fa-bus" /> 
     </td> 
     <td class="font-w600">Keith Simpson</td> 
     <td>Sulenke Vihsar Road, Pune</td> 
     <td>5 Hours 10 Mins</td> 
     <td>22 Km/hr</td> 
     <td>5 Km</td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 

     </tr> 

     <tr class="font-tr"> 
     <td class="text-center"> 
      <i class="fa fa-bus fa-2x fa-red fa-bus" /> 
     </td> 
     <td class="font-w600">Ethan Howard</td> 
     <td>JM Road, Pune</td> 
     <td>5 Mins</td> 
     <td>0.0 Km/hr</td> 
     <td>0 Km</td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 

     </tr> 

     <tr class="font-tr"> 
     <td class="text-center"> 
      <i class="fa fa-bus fa-2x fa-orange fa-bus" /> 
     </td> 
     <td class="font-w600">Donald Barnes</td> 
     <td>Aundh-Baner Road, Pune</td> 
     <td>36 Mins</td> 
     <td>0.0 Km/hr</td> 
     <td>0 Km</td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 

     </tr> 

     <tr class="font-tr"> 
     <td class="text-center"> 
      <i class="fa fa-bus fa-2x fa-red fa-bus" /> 
     </td> 
     <td class="font-w600">Sandesh Keshaowar</td> 
     <td>Chandan Nagar, Kharadi, Pune</td> 
     <td>1Hour 10 Mins</td> 
     <td>0.0 Km/hr</td> 
     <td>0 Km</td> 
     <td class="font-td"> 
      <span class="label label-success">On</span> 
     </td> 
     <td class="font-td"> 
      <span class="label label-warning">Off</span> 
     </td> 

     </tr> 
    </tbody> 
    </table> 


</body> 

</html>

來源

2016-02-22 Sandesh Keshaowar

你的問題是？ –

您可以對錶格行元素使用jquery .hover（）方法。這裏是一個基本的例子，當你將鼠標懸停在一行上時，它可以記錄表格單元格的內容。

$('tr').hover(function() { 
      var thisRow = $(this); 
      var myVal = ''; 
      thisRow.find('td').each (function() { 
       myVal = myVal + $(this).html() + ' '; 
      }); 
      console.log(myVal);       
});

來源

2016-02-23 00:44:56

謝謝你的回答，但是有可能用這個內容顯示行中的定製popover。 –

看看tooltip.js。我認爲這可能是你正在尋找的功能：https：//jqueryui.com/tooltip/ –

當懸停在表格行上時，如何顯示該行字段數據的內容的彈出窗口？

回答

相關問題