JavaScript动态生成树形菜单创建表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>无限级树形菜单</title> <mce:style><!-- #A1 td { vertical-align: top; } #A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; } #A1 td.bj , #A1 td.kg { width: 24; } #A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; } #A1 a:hover { color: #0ff080; text-decoration: none; } --></mce:style><style mce_bogus="1">#A1 td { vertical-align: top; } #A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; } #A1 td.bj , #A1 td.kg { width: 24; } #A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; } #A1 a:hover { color: #0ff080; text-decoration: none; }</style> <mce:script language="JavaScript"><!-- function m_start(name,tt) //菜单组开始 { document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>'); document.writeln('<td><a href="#" mce_href="#" onclick="zgmm()">'+name+'</a></td>'); document.writeln('</tr>'); document.writeln('<tr style="display: '+(tt==1?'block':'none')+';" mce_style="display: '+(tt==1?'block':'none')+';">'); document.writeln('<td class="bj"> </td>'); document.writeln('<td>'); document.writeln('<table border="0" cellpadding="0" cellspacing="0">'); } function m_end() //菜单组结束 { document.writeln('</table></td></tr>'); } function add_Sub(name,url,kj) //添加菜单项 { document.writeln('<tr><td class="bj">2</td><td>'); document.writeln('<a target="'+kj+'" href="'+url+'" mce_href="'+url+'">'+name+'</a>'); document.writeln('</td></tr>'); } function zgmm() { //当前发生事件的对象的父对象的上一个兄弟对象 var ero = event.srcElement.parentElement.previousSibling; //当前发生事件的对象的父对象的父对象的下一个兄弟对象 var mo = event.srcElement.parentElement.parentElement.nextSibling; mo.style.display = (mo.style.display=="none")?"block":"none"; ero.innerHTML = (mo.style.display=="none")?"0":"1"; } // --></mce:script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="A1"> <mce:script language="JavaScript"><!-- // 说明： // 菜单组开始，m_start(name,tt); name为菜单组名称，tt为1菜单组初始时展开，为0不展开 // 菜单组结束：m_end(); // 添加菜单项：add_Sub("菜单项名称","url地址","框架名"); m_start("root",0); m_start("1.1",0); m_start("1.1.1",0); add_Sub("1.1.1.1","http://www.csdn.net/","_blank"); add_Sub("1.1.1.2","#","_blank"); add_Sub("1.1.1.3","#","_blank"); m_end(); m_start("1.1.2",0); add_Sub("1.1.2.1","#","_blank"); add_Sub("1.1.2.2","#","_blank"); add_Sub("1.1.2.3","#","_blank"); m_end(); m_start("1.1.3",0); add_Sub("1.1.3.1","#","_blank"); add_Sub("1.1.3.2","#","_blank"); add_Sub("1.1.3.3","#","_blank"); m_end(); add_Sub("1.1.4","#","_blank"); add_Sub("1.1.5","#","_blank"); add_Sub("1.1.6","#","_blank"); m_end(); m_start("1.2",0); add_Sub("1.2.1","#","_blank"); add_Sub("1.2.2","#","_blank"); add_Sub("1.2.3","#","_blank"); m_end(); m_start("1.3",0); add_Sub("1.3.1","#","_blank"); add_Sub("1.3.2","#","_blank"); add_Sub("1.3.3","#","_blank"); m_end(); add_Sub("1.4","#","_blank"); add_Sub("1.5","#","_blank"); m_end(); // --></mce:script> </table> </body> </html>
-------------------------------------------------------------------------------------------------------------------------------
<mce:script language=javascript><!-- var obj = document.createElement("table"); var tbody = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.innerText = "AAA" tr.appendChild(td); tbody.appendChild(tr); obj.appendChild(tbody); document.all.Form1.appendChild(obj); var obj2 = new Array(); for (var i=0;i<5;i++) { obj2[i] = obj.cloneNode(true); obj2[i].setAttribute("border","1"); document.all.Form1.appendChild(obj2[i]); } // --></mce:script>