树形js代码（javascript树形菜单代码）

今天给各位分享树形js代码的知识，其中也会对javascript树形菜单代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、树状图用js怎么写啊
• 2、JS实现树形选择器
• 3、求大神指点js生成树结构

树状图用js怎么写啊

下面是我从网上看到的结果，不知道是否可用。。

//head中

script language="Javascript"

function turnit(ss,bb)

{

if (ss.style.display=="none")

{

ss.style.display="";

}

else {

ss.style.display="none";

}

}

/script

//body中

table width="100" border="0" cellspacing="0" cellpadding="0"

tr

td id="tag0" style="CURSOR: hand" （说明：光标变为手形）

onClick="turnit(Content0,tag0)"目录1/td

/tr

tr

td

table id="Content0" style="CURSOR: hand" width="100%"

tr td align="center"内容一/td

/tr

tr

td align="center"内容二/td

/tr

/table/td

/tr

tr

td id="tag1" style="CURSOR: hand"

onClick="turnitTop(Content1,tag1)"目录2/td

/tr

tr

td

table id="Content1" style="CURSOR: hand;DISPLAY:none" width="100%"

tr （说明：默认为不显示）

td align="center"内容一/td

/tr

tr

td align="center"内容/td

/tr

/table/td

/tr

/table

JS实现树形选择器

这个简单，我写了段代码，你copy过去看下是不是你要的效果！望采纳！！

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title制作树形菜单/title

style type="text/css"

div{/*隐藏层*/

display:none;

}

a {/*文字链接的背影样式*/

font-size:13px;

color: #ffffff;

text-decoration: none;

background-color:#669933;

width:100px;

line-height:25px;

text-align:center;

display: block;

border-right:1px solid #ffffff;

border-bottom:1px solid #ffffff;

}

a:hover {

/*鼠标在文字链接上时的文字背景样式*/

font-size:13px;

color: #ffffff;

background-color:#ee9d01;

width:100px;

text-align:center;

display: block;

}

/style

script type="text/javascript"

function show(d){

document.getElementById(d).style.display='block'; //显示层

}

function hide(d){

document.getElementById(d).style.display='none'; //隐藏层

}

/script

/head

body

table border="0" cellspacing="0" cellpadding="0"

tr

tda href="#" onmousemove="show(1)" onmouseout="hide(1)"手机数码/a/td

tda href="#" onmousemove="show(2)" onmouseout="hide(2)"淘宝集市/a/td

tda href="#" onmousemove="show(3)" onmouseout="hide(3)"品牌商城/a/td

/tr

tr

td

div id="1"

a href="#"手机数码1/a

a href="#"手机数码2/a

a href="#"手机数码3/a

/div

/td

td

div id="2"

a href="#"淘宝集市1/a

a href="#"淘宝集市2/a

a href="#"淘宝集市3/a

/div

/td

td

div id="3"

a href="#"品牌商城1/a

a href="#"品牌商城2/a

a href="#"品牌商城3/a

/div

/td

/tr

/table

/body

/html

求大神指点js生成树结构

// 生成树结构

function tree(list) {

const result = [];

for (let value of list) {

// 排除空字符串的情况

if (!value) {

continue;

}

const values = value.split('/');

// 查找树结构的当前级别是否已经存在，不存在则创建对象，并添加入列表。

let current = result.find(item = item.name === values[0]);

if (current === void 0) {

current = {};

result.push(current);

}

for (let i = 0, length = values.length; i length; i++) {

current.name = values[i];

if (i length - 1) {

// 如果还有下一级内容，判断当前是否有 children，没有则构建.

if (current.children === void 0) {

current.children = [];

}

// 查找下一级对象，为下一遍遍历构建对象

let nextCurrent = current.children.find(item = item.name === values[i + 1]);

if (nextCurrent === void 0) {

nextCurrent = {};

current.children.push(nextCurrent);

}

current = nextCurrent;

}

}

}

return result;

}

============ 假装分割线 ===========

以上代码是生成树的函数，调用 tree 函数并传入你的 input 数据，返回值就是生成的树。百科没找到传代码的地方了。

树形js代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于javascript树形菜单代码、树形js代码的信息别忘了在本站进行查找喔。