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

zhuzhanjun

注册会员

Rank: 2

帖子：129
精华：0
积分：1604
在线：107 小时
注册：2008-5-3

1^# 大中小发表于 2008-6-18 10:59 只看该作者

【求助】如何实现把鼠标放在文字上后，下面的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 数据文字建材

TOP

yms123

版主

Rank: 12

帖子：7651
精华：9
积分：78396
威望：65
在线：673 小时
注册：2004-7-17

2^# 大中小发表于 2008-6-18 12:02 只看该作者

<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>

http://www.lxzhcn.net
版块版主招募中
网站论坛发帖无问题，欢迎发帖。

TOP

hmhz

版主

Rank: 12

帖子：1321
精华：0
积分：14192
威望：11
在线：441 小时
注册：2006-12-17

3^# 大中小发表于 2008-6-18 12:51 只看该作者

复制内容到剪贴板

代码:

<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>