如何通过使用Jquery匹配HTML中的ID来添加工具提示

我正在使用HTML和Jquery

我有下面的问题,下面有HTML代码

<table style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
    border-bottom-style: solid" cellspacing="1" cellpadding="1" width="100%" border="1">
    <tbody>
        <tr>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left">
                <strong>Type of Course</strong>
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left">
                <strong>Courses </strong>
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; text-align: left; border-bottom-style: solid" align="left">
                <strong>Credits</strong>
            </td>
        </tr>
        <tr>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                background-color: #dfdfdf; border-bottom-style: solid">
                Core
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid" id="Communication">
                Communication Course
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
                5
            </td>
        </tr>
        <tr>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
                English Course
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
                5
            </td>
        </tr>
        <tr>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid" id="Mathematics">
                Mathematics Course
            </td>
            <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
                border-bottom-style: solid">
                5
            </td>
        </tr>
    </tbody>
</table>

<div style="display: none">
    <ul>
        <li id="CommunicationTooltip">
            <a href="#" class="toolTip">
                <img src="/images/q_mark.gif" alt=""/><span style="width: 500px;">Testing Communication.</span>
            </a>
        </li>
        <li id="MathematicsTooltip">
            <a href="#" class="toolTip">
                <img src="/images/q_mark.gif" alt=""/><span style="width: 500px;">Testing Mathematics.</span>
            </a>
        </li>
    </ul>
</div>

在上面的HTML代码中,您将看到我们有很多TD,其中一些没有ID,而某些TD具有ID,而在下面,您会看到我的DIV和LI的ID与上面TD中使用的ID相同,并带有额外的工具提示.

现在我想要当加载的页面与那里的ID(TD和LI)匹配(包括额外的工具提示文本)时,将在该特定TD中添加以下A HREF文本,以便在该TD的HTML下生成

   <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid;
        border-bottom-style: solid" id="Communication">
        Communication Course 
<a href="#" class="toolTip">
        <img src="/images/q_mark.gif" alt=""/><span style="width: 500px;">Testing Communication.</span>
    </a>
    </td>

请使用Jquery建议解决方案

最佳答案

根据您的标记,应该这样做：

$(document).ready(function() {

    // bind to cells with an ID attribute
    $("table > tbody > tr > td[id]").mouSEOver(function() {

        // grab the anchor from the LI whose ID starts with the cell's ID
        var $tooltip = $("div:hidden li[id^=" + $(this).attr("id") + "] a");

        // append it to the current cell
        $(this).append($tooltip);
    }).mouSEOut(function() {

        // remove the anchor/tooltip
        $(this).find("a").remove();
    });
});

原文链接：https://www.f2er.com/jquery/530984.html

如何通过使用Jquery匹配HTML中的ID来添加工具提示

猜你在找的jQuery相关文章