如何通过使用Jquery在HTML中匹配ID来添加工具提示
我正在使用HTML和Jquery 我有下面的问题,我有下面的HTML代码如何通过使用Jquery在HTML中匹配ID来添加工具提示,jquery,Jquery,我正在使用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>
<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>
课程类型
课程
学分
核心
传播课程
5.
英语课程
5.
数学课程
5.
-
-
在上面的HTML代码中,您将看到我们有许多TD,一些没有ID的和一些TD有ID的,下面你可以看到我有DIV和LI有ID的,和上面TD中使用的一样,还有额外的工具提示
现在我想在加载页面时匹配那里的ID(TD和LI)包括额外的工具提示文本,下面的A HREF文本将添加到特定的TD,这样它将导致该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();
});
});