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

Question

我有一个表格，该行正在循环，并且在某些情况下，我想将其 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>

HTML 视图：

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

Answer 1

您当前所做的是查找最近的表格元素，然后查找所有 class="updeltd" 元素，因此 .offset() 返回第一个（第一行）的偏移量。你需要的是

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

请注意，您还通过为每个 td 元素复制 id 来创建无效的 html。改用类名