将鼠标悬停在表行上时，如何显示包含该行字段数据的弹出窗口

When hovering on table row, how to show popover with content of that row fields data?

本文关键字：字段 包含该 显示 数据 窗口 何显示 悬停 鼠标      更新时间：2023-09-26
<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>

您可以将 jquery .hover（） 方法与表行元素一起使用。下面是一个基本示例，当您将鼠标悬停在表格单元格上时，该示例记录了表中单元格在一行中的内容。

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