Question

我有几个视图，它们共享一个公共的局部视图，每个视图都有不同数量的包含不同数据元素的表和行。当用户将鼠标悬停在任何其他行上时，我希望共享的局部视图显示特定于该行的预期数据类型的文本字符串，并在它们悬停在该行之外时消失。以下是带有两个示例表行的示例主视图。

<table>
<tr onmouseover="showDef(2)" onmouseout="showDef(0)">
    <td>
        <label for="TerminalID" class="formlabel"><label class="asterisk">*</label>Terminal ID:</label>
        @Html.TextBoxFor(model => Model.transactions.NGT_TERMINAL_ID, new { @class = "forminput", value = "", required = "required" })
    </td>
</tr>
<tr onmouseover="showDef(13)" onmouseout="showDef(0)">
    <td>
        <label for="Amount" class="formlabel"><label class="asterisk">*</label>Amount:</label>
        @Html.TextBoxFor(model => Model.transactions.NGT_AMOUNT, new { @class = "forminput", maxlength = "9", type = "number", onblur = "Validate(id); GetAmounts(id, 'tipamt')", id = "amt", required = "required" })
    </td>
</tr></table>

在这一点上，当我将iFrame用于主视图和局部视图时，我以前的设置可以正常工作，而我正逐渐远离。在有人建议仅对每行使用一个工具提示之前，大约有64个视图，每个视图至少包含十二行，有些视图多达三十行，并且描述有时会有所变化，因此一一更改60个工具提示并不是一件容易的事。完全理想。下面是当前启动文本更改的javascript，下面是目标iframe（局部视图），然后是CSS的帮助。

Javascript：

function showDef(t) {
        top.sideframe.activeDef.style.visibility = "hidden";
        top.sideframe.activeDef = top.sideframe.document.getElementById("def" + t);
        top.sideframe.activeDef.style.visibility = "visible";
    }

目标iFrame（现在为部分视图）：

<label id="def0" class="def"></label>
<label id="def2" class="def">Terminal Identification number</label>
<label id="def13" class="def">Amount of stuff</label>

CSS：

.def {
    position: absolute;
    visibility: hidden;
    left: 10px;
    top: 4%; /*  text position from top of screen*/
    width: 97%;
    color: #FE0101; /* text  */
    margin-top: 20px;
    background: #eef1f6; /* body */
}

任何方向都值得赞赏。

MVC-主视图表行中的OnMouseOver，部分视图文本更改

0 个答案: