【求助】如何实现把鼠标放在文字上后，下面的table中显示数据 - ASP技术论坛

问题点数：0 回复次数：4

【求助】如何实现把鼠标放在文字上后，下面的table中显示数据

我要完成的功能是：在以下的tr中有五个不同的td，当我放在不同的td上的时候，最下面的tr显示数据，数据都是从数据中读出来的

<tr>
<td colspan="2">
<TABLE cellSpacing=0 cellPadding=0 width="100%"  border=0>
<TBODY>
<TR>
<TD align=middle vAlign=bottom bgColor=#FF9900 >项目介绍</TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >交通状况</TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >周边配套</TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >建材装修</TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >相关信息</TD>
</TR>
</TBODY>
</TABLE>
</td>
</tr>

<TR vAlign=top>
<TD height="453"  colspan="2">
<table>
<tr>
<td>
    此处显示数据
</td>
</tr>
</table>
</TD>
</TR>

在线等，谢谢

搜索更多相关主题的帖子: 鼠标　 table　数据　文字　建材　

第 2 楼

得分:0

<tr>
<td colspan="2">
<script language="javascript>
function ShowDataDiv(Idx)
{
  for(var i=0;i<this.ShowData.length;i++)
  {
      if(i==Idx)
          this.ShowData[i].style.display="block";
      else
          this.ShowData[i].style.display="none";
  }
}
</script>
<TABLE cellSpacing=0 cellPadding=0 width="100%"  border=0>
<TBODY>
<TR>
<TD align=middle vAlign=bottom bgColor=#FF9900 ><a href="#" onMouseover="ShowDataDiv(0);" >项目介绍</a></TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >
<a href="#" onMouseover="ShowDataDiv(1);" >交通状况</a></TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >
<a href="#" onMouseover="ShowDataDiv(2);" >周边配套</a></TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >
<a href="#" onMouseover="ShowDataDiv(3);" >建材装修</a></TD>
<TD align=middle vAlign=bottom bgColor=#FF9900 >
<a href="#" onMouseover="ShowDataDiv(4);" >相关信息</a></TD>
</TR>
</TBODY>
</TABLE>
</td>
</tr>

<TR vAlign=top>
<TD height="453"  colspan="2">
<table>
<tr>
<td>
<div id="ShowData" style="display:none">
项目介绍
</a>
<div id="ShowData" style="display:none">
交通状况
</a>
<div id="ShowData" style="display:none">
周边配套
</a>
<div id="ShowData" style="display:none">
建材装修
</a>
<div id="ShowData" style="display:none">
相关信息
</a>
</td>
</tr>
</table>
</TD>
</TR>

第 3 楼

得分:0

程序代码：

<script language="javascript">
function ShowDiv(Idx){
var div=document.getElementsByTagName("div");
for(var i=0;i<div.length;i++){
if(i==Idx){document.getElementById("Show"+Idx).style.display="block";
}else{document.getElementById("Show"+i).style.display="none";}
}}
</script>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="middle" valign="bottom" bgcolor="#FF9900"><a href="#" onmouseover="ShowDiv(0);">项目介绍</a></td>
<td align="middle" valign="bottom" bgcolor="#FF9900"><a href="#" onmouseover="ShowDiv(1);">交通状况</a></td>
<td align="middle" valign="bottom" bgcolor="#FF9900"><a href="#" onmouseover="ShowDiv(2);">周边配套</a></td>
<td align="middle" valign="bottom" bgcolor="#FF9900"><a href="#" onmouseover="ShowDiv(3);">建材装修</a></td>
<td align="middle" valign="bottom" bgcolor="#FF9900"><a href="#" onmouseover="ShowDiv(4);">相关信息</a></td>
</tr>

<tr valign="top">
<td height="453" colspan="5">
<div id="Show0" style="display:none">项目介绍</div>
<div id="Show1" style="display:none">交通状况</div>
<div id="Show2" style="display:none">周边配套</div>
<div id="Show3" style="display:none">建材装修</div>
<div id="Show4" style="display:none">相关信息</div>
</td>
</tr>
</table>
</script>

[[it] 本帖最后由 hmhz 于 2008-6-18 12:53 编辑 [/it]]