如何通過使用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(); 
    }); 
});