Question

我有一张表是行正在循环，并且在某些情况下，我想将 tr 之一的鼠标悬停在 td 下，并带有 class =＆＃34; updeltd＆＃34; 并显示 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。请改用类名

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

1 个答案: