用javaScript 实现两个 页面效果

1.<HTML>
<HEAD>
<TITLE> 可编辑的表格 </TITLE>
</HEAD>
<BODY>
<TABLE id="test" border="1" style="border-collapse:collapse">
<TR>
<TD>Java入门1</TD>
<TD>Java入门2</TD>
<TD>Java入门3</TD>
<TD>Java入门4</TD>
</TR>
<TR>
<TD>Spring学习1</TD>
<TD>Spring学习2</TD>
<TD>Spring学习3</TD>
<TD>Spring学习4</TD>
</TR>
<TR>
<TD>Hibernate学习1</TD>
<TD>Hibernate学习2</TD>
<TD>Hibernate学习3</TD>
<TD>Hibernate学习4</TD>
</TR>
<TR>
<TD>Ajax应用开发1</TD>
<TD>Ajax应用开发2</TD>
<TD>Ajax应用开发3</TD>
<TD>Ajax应用开发4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<script>
var tmpIn;
var curCell; function edit(event)
{
if( event == null )
{
curCell = window.event.srcElement;
}
else
{
curCell = event.target;
} tmpIn = document.createElement("input");
tmpIn.type="text";
tmpIn.value=curCell.innerHTML;
tmpIn.onblur= end;
curCell.innerHTML = "";
curCell.appendChild(tmpIn); }

function end()
{
curCell.innerHTML=tmpIn.value;
}
document.getElementById("test").ondblclick = edit;</script>
2.<html>
<head>
<title>导航菜单</title>
<style>
#menubar{
width:780px;
height:32px;
background-color:menu;
padding-top: 3px;
} #menubar div{
height:23px;
width:60px;
display:inline; 
font-size:10pt;
background-color:menu;
text-align:center;
vertical-align:middle;
padding-top: 6px;
cursor:default;
}
.menuhover{
border-style:solid;
border-width:1px;
border-bottom-color:#333333;
border-right-color:#333333;
border-left-color:#ffffff;
border-top-color:#ffffff;
}
.menuclick{
border-style:solid;
border-width:1px;
border-bottom-color:#ffffff;
border-right-color:#ffffff;
border-left-color:#333333;
border-top-color:#333333;
} .menu{
z-index:100;
position:absolute;
border-style:solid;
border-width:1px;
width:182px;
background-color:menu;
border-bottom-color:#333333;
border-right-color:#333333;
border-left-color:#ffffff;
border-top-color:#ffffff;
font-size:10pt;
cursor:default;
}
.menuitemhover{
width:180px;
height:22px;
background-color:#000055;
color:#ffffff;
padding-top: 6px;
padding-left: 2px;
}
.menuitem{
width:180px;
height:22px;
padding-top: 6px;
padding-left: 2px;
}

</style>
<script>
var lastMenu;
var lastMenuTitle; //菜单悬停时的立体效果
function menuHover(event)
{
var targetMenu;
if (event.srcElement != null)
{
targetMenu = event.srcElement;
}
else
{
targetMenu = event.target;
}
targetMenu.className = "menuhover";
}
//菜单移出时的恢复效果
function menuGotOut(event)
{
var targetMenu;
if (event.srcElement != null)
{
targetMenu = event.srcElement;
}
else
{
targetMenu = event.target;
}
if (targetMenu.className != "menuclick")
{
targetMenu.className = "";
}
}
//菜单项悬停时的选蓝
function itemHover(event)
{
var targetMenu;
if (event.srcElement != null)
{
targetMenu = event.srcElement;
}
else
{
targetMenu = event.target;
}
targetMenu.className = "menuitemhover";
}
//菜单项移出时的恢复
function itemGotOut(event)
{
var targetMenu;
if (event.srcElement != null)
{
targetMenu = event.srcElement;
}
else
{
targetMenu = event.target;
}
targetMenu.className = "menuitem";
}
function showMenu(name , obj)
{
if ( lastMenuTitle != null ) lastMenuTitle.className = "";
obj.className="menuclick";
if ( lastMenu != null ) lastMenu.style.display = "none"
var mu = document.getElementById(name);
mu.style.display="";
lastMenuTitle = obj;
lastMenu = mu;
}
</script>
</head>
<body>
<div id="menubar">
<div onMouseOver="menuHover(event);"  onMouseOut="menuGotOut(event);" onClick="showMenu('file',this);">文件</div>
<div onMouseOver="menuHover(event);" onMouseOut="menuGotOut(event);" onClick="showMenu('edit',this);">编辑</div>
<div onMouseOver="menuHover(event);" onMouseOut="menuGotOut(event);" onClick="showMenu('view',this);">查看</div>
</div>
<div id="file" style="display:none;left:9px;" class="menu" name="menu">
<div class="menuitem" onMouseOver="itemHover(event);"  onMouseOut="itemGotOut(event);" onClick="">新建</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">打开</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">保存</div>
</div>
<div id="edit" style="display:none;left:69px;" class="menu" name="menu">
<div class="menuitem" onMouseOver="itemHover(event);"  onMouseOut="itemGotOut(event);" onClick="">复制</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">剪切</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">粘贴</div>
</div>
<div id="view" style="display:none;left:129px;" class="menu" name="menu">
<div class="menuitem" onMouseOver="itemHover(event);"  onMouseOut="itemGotOut(event);" onClick="">放大</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">缩小</div>
<div class="menuitem" onMouseOver="itemHover(event);" onMouseOut="itemGotOut(event);" onClick="">全屏</div>
</div>
</body>
</html>