如何通过使用jQuery

Question

我使用HTML和jQuery

我有以下问题匹配HTML的ID添加提示，我有一个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（TD和LI）包括额外工具提示文字，下面A HREF文本将在特定TD加入，这样它会导致以下HTML为TD

<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

Answer 1

建议的解决方案基于您的标记，这应该这样做：

$(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(); 
    }); 
});