javascript结合DOM创建菜单（纯处源创）
废话我就不多说了。代码直接贴，另保存为HTML就可以直接运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<script language="jscript">
var offsetEl;
var myTable;
var myTableBody;
var dataDiv;
/*
*初始化全部变量，读取HTML元素
*/
function initVars(){
dataDiv=document.getElementById("popup");
var table=document.createElement("table");
var tbody=document.createElement("tbody");
table.setAttribute("id","myTable");
table.setAttribute("bgColor","#FFFAFA");
table.setAttribute("border","0");
table.setAttribute("cellSpacing","2");
table.setAttribute("cellPadding","2");
tbody.setAttribute("id","myTableBody");
table.appendChild(tbody);
dataDiv.appendChild(table);
myTable=document.getElementById("myTable");
myTableBody=document.getElementById("myTableBody");
}
/*
*获取内容
*/
function getCoursetData(em)
{
initVars();
offsetEl=em;
callBack();
}
/*
*AJAX的服务器内容返回时处理函数（如果使用AJAX时）
*/
function callBack()
{
setData();
}
/*
* 设置页面的内容
*/
function setData()
{
var row;
//假设这里是加载一个新的子菜单
var linkText=[
"<a href='#'>子链接1</a>",
"<a href='#'>子链接2</a>",
"<a href='#'>子链接3</a>",
"<a href='#'>子链接4</a>",
"<a href='#'>子链接5</a>"
];
clearData();
setOffsets();
for(var i=0;i<linkText.length;i++){
row=createRow(linkText[i]);
row.setAttribute("height","20");
myTableBody.appendChild(row);
}
}
/*
* DOM技术动态创建表的行
*/
function createRow(data)
{
var row,cell,textNode;
row = document.createElement("tr");
cell = document.createElement("td");
cell.setAttribute("bgcolor","#E8E8E8");
cell.setAttribute("border","0");
cell.innerHTML=data;
row.appendChild(cell);
return row;
}
/*
* 清除表的行
*/
function clearData()
{
var ind=myTableBody.childNodes.length;
for(var i=ind-1;i>=0 ; i--)
{
myTableBody.removeChild(myTableBody.childNodes[i]);
}
dataDiv.style.border="none";
dataDiv.style.display="none";
}
/*
* 设置提示框的位置
*/
function setOffsets()
{
var end = offsetEl.offsetWidth;
setbgColor();
offsetEl.bgColor="#FFFAFA";
var top = calculteOffsetTop(offsetEl);
dataDiv.style.border="#999999 1px solid";
dataDiv.style.left=end+11+"px";
dataDiv.style.top=top-1+"px";
dataDiv.style.display="";
}
/*
* 设置内容
*/
function calculteOffsetTop(field)
{
return calculteOffset(field,"offsetTop");
}
/*
* 具体设置
*/
function calculteOffset(field,attr)
{
var offset = 0;
while(field) {
offset+=field[attr];
field=field.offsetParent;
}
return offset;
}
/*
*设置背景颜色
*/
function setbgColor()
{
//取得节点dataLists下的tbody
var dlist=document.getElementById("dataLists").firstChild;
var mytr=dlist.childNodes;
for(var i=0;i< mytr.length;i++)
{
//将所有背景设置为#E8E8E8的颜色值
mytr[i].firstChild.bgColor="#E8E8E8";
}
}
/*
* 表格的创建
*/
function creataTables(objID)
{
var div=document.getElementById(objID);
var table=document.createElement("table");
var tbody=document.createElement("tbody");
//假设创建的几个菜单
var tdText=[
"中国联通",
"中国电信",
"中国移动",
"中国网通",
"重庆分公司",
"广西河池市",
"成都游戏公司",
"传奇世界",
"超级解霸",
"超级兔子"
];
var N=tdText.length;
for(var i=0;i<N;i++)
{
var tr=document.createElement("tr");
var td=document.createElement("td");
td.setAttribute("id",i);
td.setAttribute("align","center");
td.setAttribute("bgColor","#E8E8E8");
td.innerHTML="<a href='#'>"+tdText[i]+"</a>";
td.onmouseover=function(){getCoursetData(this)};
tr.appendChild(td);
tr.setAttribute("height","25");
tbody.appendChild(tr);
}
table.setAttribute("border","0");
table.setAttribute("id","dataLists");
table.setAttribute("width","120");
table.setAttribute("cellPadding","0"); //注意P是大写的
table.setAttribute("cellSpacing","1"); //注意S是大写的
table.setAttribute("bgColor","#999999"); //注意C是大写的
table.appendChild(tbody);
div.appendChild(table);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单创建</title>
</head>
<body onload="creataTables('mYdd');">
<div id="mYdd"/>
<div style="position:absolute;display:none;" id="popup"/>
</body>
</html>
