时间戳

首页 > 解决方案 > 将鼠标悬停在单元格上时，在表格单元格 (td) 的工具提示上获取表格标题 (th)

javascript - 将鼠标悬停在单元格上时，在表格单元格 (td) 的工具提示上获取表格标题 (th)

问题描述

我有 3 列的表 - 当我将鼠标悬停在第 3 列时，工具提示应该显示它的表头th值。

这是我到目前为止所拥有的（不工作）：

Javascript：

$('#waypointsTable td').hover(function() {
  var $td='td';
  var $th = $td.closest('tbody').prev('thead').find('> tr > th:eq(' + $td.index() + ')');
});

html:

<table id="waypointsTable" border="1">
<tbody>
<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<tr>
    <td>some text 1</td>
     <td>some text 1</td>
      <td>some text 1</td>
</tr>
<tr>
    <td>some text 2</td>
     <td>some text 2</td>
      <td>some text 2</td>
</tr>
<tr>
    <td>some text 3</td>
     <td>some text 3</td>
      <td>some text 3</td>
</tr>
</tbody>
</table>

标签： javascriptjquery

解决方案

基于提供的javascript：

  • 首先，如果您正在使用，.prev("thead")那么您需要更改您的 html 以使其具有<thead>.

  • 接下来，使用mouseover而不是hover- 没有太大区别，但是您不需要在“悬停”上做任何事情，所以不需要这样做。

  • 用于var td = $(this)获取当前单元格

  • 使用您现有的代码（大部分）来获取相关的th

  • 然后，使用td.attr("title", th.text())设置单元格上的工具提示。

放在一起：

$('#waypointsTable tbody td').on("mouseover", function() {
  var td = $(this);
  var th = td.closest('tbody').prev('thead').find('> tr > th:eq(' + td.index() + ')');
  td.attr("title", th.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="waypointsTable" border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>some text 1</td>
      <td>some text 1</td>
      <td>some text 1</td>
    </tr>
    <tr>
      <td>some text 2</td>
      <td>some text 2</td>
      <td>some text 2</td>
    </tr>
    <tr>
      <td>some text 3</td>
      <td>some text 3</td>
      <td>some text 3</td>
    </tr>
  </tbody>
</table>

您可以在启动时执行此操作，因为工具提示一旦设置就不会更改。

推荐阅读