Question

我有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>

Answer 1

基于提供的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>

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

将鼠标悬停在单元格上时，在表格单元格（td）的工具提示上获取表格标题（th）

1 个答案: