Javascript 如何在表格中的精确位置显示工具提示？

我有一个表，该行正在循环，并且在某些情况下，我想将其tr的鼠标悬停在td下，并使用class=“updeltd”显示div元素作为其工具提示。我的问题是，当我将鼠标悬停在该td上时，我只能在表格的第一行而不是放置鼠标的那一行显示工具提示。我想我的javascript函数有问题。这是细节，谢谢

jQuery/Javascript函数：

function DispTooltip() {

           var ttipshow = document.getElementById("tooltip");
           ttipshow.style.display = "block";

           var coord = $(this).closest('table').find('td[class="updeltd"]').offset();

           $('#tooltip').css({ top: coord.top, left: coord.left - 345 });

        } 

<div id="tooltip"> This is my tooltip </div>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Occupation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nationality)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {

    <tr >
        <td id="ID">

            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td id="Name">

            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td id="Addr">

            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td id="age">

            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td id="occ">

            @Html.DisplayFor(modelItem => item.Occupation)
        </td>

        <td id="natn">
              <input type="text" id="nat" value="  @Html.DisplayFor(modelItem => item.Nationality)" style="display:none" />
            @Html.DisplayFor(modelItem => item.Nationality)
        </td>

       <td id="image" onmouseover="DispTooltip()" onmouseout="return HideTooltip();">
       <img id="detimg" alt="" src="@Url.Content("~/Photos/" + item.Photos)" style="width:50px;height:50px" />

        </td>

       <td id="updel" class="updeltd" onmouseover="DispTooltip()" onmouseout="return HideTooltip();" >

      @Html.ActionLink("Edit/Delete Records", "UpdateDeleteRec", new { id=item.ID}) 

       </td>

    </tr>
}

</table>

工具提示：

function DispTooltip() {

           var ttipshow = document.getElementById("tooltip");
           ttipshow.style.display = "block";

           var coord = $(this).closest('table').find('td[class="updeltd"]').offset();

           $('#tooltip').css({ top: coord.top, left: coord.left - 345 });

        } 

<div id="tooltip"> This is my tooltip </div>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Occupation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nationality)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {

    <tr >
        <td id="ID">

            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td id="Name">

            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td id="Addr">

            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td id="age">

            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td id="occ">

            @Html.DisplayFor(modelItem => item.Occupation)
        </td>

        <td id="natn">
              <input type="text" id="nat" value="  @Html.DisplayFor(modelItem => item.Nationality)" style="display:none" />
            @Html.DisplayFor(modelItem => item.Nationality)
        </td>

       <td id="image" onmouseover="DispTooltip()" onmouseout="return HideTooltip();">
       <img id="detimg" alt="" src="@Url.Content("~/Photos/" + item.Photos)" style="width:50px;height:50px" />

        </td>

       <td id="updel" class="updeltd" onmouseover="DispTooltip()" onmouseout="return HideTooltip();" >

      @Html.ActionLink("Edit/Delete Records", "UpdateDeleteRec", new { id=item.ID}) 

       </td>

    </tr>
}

</table>

这是我的工具提示

HTML视图：

function DispTooltip() {

           var ttipshow = document.getElementById("tooltip");
           ttipshow.style.display = "block";

           var coord = $(this).closest('table').find('td[class="updeltd"]').offset();

           $('#tooltip').css({ top: coord.top, left: coord.left - 345 });

        } 

<div id="tooltip"> This is my tooltip </div>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Occupation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Nationality)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {

    <tr >
        <td id="ID">

            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td id="Name">

            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td id="Addr">

            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td id="age">

            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td id="occ">

            @Html.DisplayFor(modelItem => item.Occupation)
        </td>

        <td id="natn">
              <input type="text" id="nat" value="  @Html.DisplayFor(modelItem => item.Nationality)" style="display:none" />
            @Html.DisplayFor(modelItem => item.Nationality)
        </td>

       <td id="image" onmouseover="DispTooltip()" onmouseout="return HideTooltip();">
       <img id="detimg" alt="" src="@Url.Content("~/Photos/" + item.Photos)" style="width:50px;height:50px" />

        </td>

       <td id="updel" class="updeltd" onmouseover="DispTooltip()" onmouseout="return HideTooltip();" >

      @Html.ActionLink("Edit/Delete Records", "UpdateDeleteRec", new { id=item.ID}) 

       </td>

    </tr>
}

</table>

@DisplayNameFor（model=>model.ID）
@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Address）
@DisplayNameFor（model=>model.Age）
@DisplayNameFor（model=>model.occulation）
@DisplayNameFor（model=>model.national）
@foreach（模型中的var项目）{
@DisplayFor（modeleItem=>item.ID）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Address）
@DisplayFor（modelItem=>item.Age）
@DisplayFor（modelItem=>item.Occupation）
@DisplayFor（modelItem=>item.National）
@ActionLink（“编辑/删除记录”，“更新删除记录”，新建{id=item.id}”）
}

当前要做的是查找最近的表元素，然后查找所有

class=“updeltd”

元素，因此

.offset（）

返回第一个元素（第一行）的偏移量。你需要的是

var coord = $(this).closest('tr').children('.updeltd').offset();

---

注意，您还通过复制每个

td

元素的id来创建无效的html。改为使用类名

尝试获取tr的索引，并使用它与tr高度重叠并生成工具提示位置。相同的输出，完全没有更改我已经获得了正确的左坐标，但我认为顶部坐标是错误的，因为div元素将始终停留在第一行，而不是指向的行。我是否需要将所有td ID更改为不同的类名？对于无效的html，每行都有

，这是无效的，因此最好使用

。我们是否也需要为tr设置类名？因为我认为，当它被循环时，tr是重复的。使用此行var coord=$（this）.closest（'tr'）.children（'.updeltd'）.offset（）；未指定最近的“tr”，因为它没有类名。你觉得怎么样？

tr

不一定需要类名。刚刚在我的项目中做了一个快速测试，

.offset（）

工作正常。在

var-coord..

之后添加

console.log（coord.top）；和测试。注意：我在
img
标记中使用了$（tr'）.mouseenter（function（）{..

而不是

onmouseover=“DispTooltip（）”

），谢谢，函数应该是$（'tr'）.mouseenter（function（）{…），而不是onmouseover，这更准确。